npm run dev: Watchpack Error

[jelmd]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #91-Ubuntu SMP Thu Jul 15 19:09:17 UTC 2021
    Binaries:
      Node: 18.16.1
      npm: 9.5.1
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.8-canary.1
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

CLI (create-next-app), Standalone mode (output: "standalone"), Turbopack (--turbo)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/vercel/next.js/tree/canary/examples/reproduction-template-app-dir

To Reproduce

npm run dev

Describe the Bug

Thousands of errors like:

Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reached, watch '/home'
Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reached, watch '/home/${LOGNAME}'

Expected Behavior

should start the dev server without any errors.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

npm run dev

[padmaia]

This wouldn't be Turbopack related since you're not running next dev --turbo, but I know the team has worked on more efficient file watching with webpack. Can you confirm if you are still seeing this issue with v13.5+?

[itz-Me-Pj]

@padmaia @jelmd I think the issue is with the file watcher in the linux system. Try this https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached
the fix either be this or a workaround similar to this only. Give it a try and let me know if this works for you

[jelmd]

@itz-Me-Pj rising the openfd limit is not a solution, it is a really bad workaround for malfunctioning software. The problem is simply, that obviously the file watcher picks up files and directories it shouldn't. E.g. the number of files within my project folder excl. node_modules and .???* is just 155 - far away from 2048 or 4096 which are BTW reasonable defaults. Even if one adds the .next dir, this would be 155 + 219 = 374, still far away from the defaults.

[itz-Me-Pj]

@jelmd Agree, actually I am not much into the file watchers😅. So the file watcher comes with nextjs?
If yes we will have to add exclusions in nextjs in this case for .node_modules. Correct me if I am wrong.

[jelmd]

@itz-Me-Pj well, I actually have not really a clue, where this misbehavior comes from. My guess was perhaps webpack or something which gets run to compile all the stuff?

Anyway, I think I got a workaround: create a src directory and move in all the files and dirs containing stuff which needs to be compiled. My project/next.config.js looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
	reactStrictMode: true,
	webpack: function (config, options) {
		if (!config.watchOptions) {
			config.watchOptions = {
				aggregateTimeout: 5,
				//followSymlinks: false,
				ignored: [ '**/node_modules', '**/.git/**', '**/.next/**' ]
			};
		}
		config.module.rules.push({
			test: /\.svg$/i,
			issuer: /\.[jt]sx?$/,
			use: ['@svgr/webpack'],
		})
		return config;
	},
	experimental: {
		/* appDir: true, */
		instrumentationHook: true
	}
};
/*
process.on('unhandledRejection', error => {
	console.log('unhandledRejection', error);
});
*/
module.exports = nextConfig

and tsconfig.json

{
	// npx ts-node --showConfig
	"ts-node": {
		"require": ["tsconfig-paths/register"],
		"files": true,
		"compilerOptions": {
			// compilerOptions specified here will override those declared below,
			// but *only* in ts-node.  Useful if you want ts-node and tsc to use
			// different options with a single tsconfig.json.
			"module": "CommonJS",
		}
	},
	"compilerOptions": {
		"baseUrl": ".",		// required for ts-node, only
		"target": "es6",
		"lib": [
			"dom",
			"dom.iterable",
			"esnext"
		],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"forceConsistentCasingInFileNames": true,
		"noEmit": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"incremental": true,
		"paths": {
			"@/public/*": [
				"./public/*"
			],
			"@/*": [
				"./src/*"
			]
		}
	},
	"include": [
		"next-env.d.ts",
		"**/*.ts",
		"**/*.tsx"
	],
	"exclude": [
		"node_modules"
	]
}

[nick22985]

#50191 (comment)
Setting max_user_instances to 256 fixed this for me if anyone else is also facing this issue

[advanced-media]

The core problem is, that watchpack had bugs when used with Node 22.16+

watchpack is already fixed. webpack bumped watchpack's version recently (not released yet). I'm assuming as soon as Next.js bumps webpack the issue will be gone.

Btw. angular-cli had similar issues