Unable to run builds localy with 12.0.8 on WSL2

[abriginets]

Run next info (available from version 12.0.8 and up)

No response

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome 97

What operating system are you using?

WSL2 Ubuntu 20.04 under Windows 10 Pro 21H2 19044.1466

How are you deploying your application?

Heroku

Describe the Bug

I am unable to create production builds with npm run build since I upgraded to 12.0.8:

glob error [Error: EMFILE: too many open files, scandir '/home/goodwin/flaut-nextjs/node_modules/sharp/vendor/8.11.3/linux-x64'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'scandir',
  path: '/home/goodwin/flaut-nextjs/node_modules/sharp/vendor/8.11.3/linux-x64'
}
info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: EMFILE: too many open files, scandir '/home/goodwin/flaut-nextjs/node_modules/sharp/vendor/8.11.3/linux-x64'
    at makeWebpackError (/home/goodwin/flaut-nextjs/node_modules/next/dist/compiled/webpack/bundle5.js:41436:9)
    at /home/goodwin/flaut-nextjs/node_modules/next/dist/compiled/webpack/bundle5.js:25324:12
    at eval (eval at create (/home/goodwin/flaut-nextjs/node_modules/next/dist/compiled/webpack/bundle5.js:135839:10), <anonymous>:27:1)
    at /home/goodwin/flaut-nextjs/node_modules/next/dist/compiled/webpack/bundle5.js:22777:26
    at /home/goodwin/flaut-nextjs/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:327:36
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
Error: EMFILE: too many open files, scandir '/home/goodwin/flaut-nextjs/node_modules/sharp/vendor/8.11.3/linux-x64'
caused by plugins in Compilation.hooks.processAssets
Error: EMFILE: too many open files, scandir '/home/goodwin/flaut-nextjs/node_modules/sharp/vendor/8.11.3/linux-x64'


> Build failed because of webpack errors

ulimit -n outputs 4096 which should be more than enough for building the project, though increasing it up to 10k won't help. I was able to build my nextjs project only after rolling back to 12.0.7

Expected Behavior

Next should build the project successfully

To Reproduce

—

[balazsorban44]

Hi, could you add a reproduction repository so we can investigate?

[abriginets]

Sorry, the code I'm working on is copyrighted :(

UPD: this error always occur when webpack trying to scan sharp folder in node_modules. I tried deleting and adding some other modules but it was still the sharp module in the logs.

[balazsorban44]

So deleting sharp seemingly resolves the issue? Can you share some information on how do you use next/image in your project?

I wouldn't need your code if you could create a simple reproduction (eg.: using yarn create next-app for example)

since I upgraded to 12.0.8

So you are saying previous versions did not have this problem? Could you pinpoint which version introduced it in that case? It's confusing because you stated 12.0.7 under version you are using. Missed it, you said it worked in 12.0.7.

#32173 could be related. It was an update that made it to 12.0.8-canary.6. Could you see if 12.0.8-canary.5 works and 12.0.8-canary.6 does not?

You could potentially try to upgrade to canary since it included a webpack update #33207. Not necessarily relevant, but it's worth trying.

[abriginets]

It appears that builds are working fine until 12.0.8-canary.18. Starting from 12.0.8-canary.19 I can't get succesfull build and seeing the error from thread top message. I think changes from #33048 might be causing the issue.

So deleting sharp seemingly resolves the issue?

I can't check this because I'm using sharp outside of next/image in scope of my backend logic and without it installed build won't start due to typescript errors.

You could potentially try to upgrade to canary since it included a webpack update

Installing next@12.0.9-canary.1 did not help.

[ocasiom]

Getting the same error on NextJS 12.0.8, Node v16.13.2 but with Material UI Icons. Building on Azure DevOps pipelines Windows agent with version: '2.196.2'

HookWebpackError: EMFILE: too many open files, open 'D:\a\1\s\web\node_modules\@mui\icons-material\SportsHandballRounded.js'
    at makeWebpackError (D:\a\1\s\web\node_modules\next\dist\compiled\webpack\bundle5.js:41436:9)
    at D:\a\1\s\web\node_modules\next\dist\compiled\webpack\bundle5.js:25324:12
    at eval (eval at create (D:\a\1\s\web\node_modules\next\dist\compiled\webpack\bundle5.js:135839:10), <anonymous>:27:1)
    at D:\a\1\s\web\node_modules\next\dist\compiled\webpack\bundle5.js:22777:26
    at D:\a\1\s\web\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:327:36
-- inner error --
Error: EMFILE: too many open files, open 'D:\a\1\s\web\node_modules\@mui\icons-material\SportsHandballRounded.js'
caused by plugins in Compilation.hooks.processAssets
Error: EMFILE: too many open files, open 'D:\a\1\s\web\node_modules\@mui\icons-material\SportsHandballRounded.js'

[balazsorban44]

@ocasiom we need some code to verify/reproduce this, so we can investigate. It doesn't have to be your own project, just a public/minimal reproduction repository.

[neel-gaywala]

@ocasiom , I was getting the same error while building NextJS project (12.0.10), I've fixed these by importing mui icons directly without destructing,

Getting Error while build
import { ShoppingCart } from "@mui/icons-material";

Able to build
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";

[ocasiom]

@ocasiom , I was getting the same error while building NextJS project (12.0.10), I've fixed these by importing mui icons directly without destructing,

Getting Error while build import { ShoppingCart } from "@mui/icons-material";

Able to build import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";

Thanks @neel-gaywala, we ended up using the babel plugin for material UI as recommended here:
https://mui.com/guides/minimizing-bundle-size/#option-2

That seems to have solved the issue for us.