Cannot read properties of undefined (reading 'tap')

[kokokenada]

This is causes a crash in a large private project where I am trying to use npm workspaces:

Starting the development server...

/Users/me/apps/hrh/csa/packages/ui/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

TypeError: Cannot read properties of undefined (reading 'tap')
    at /Users/me/apps/hrh/csa/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js:236:65
    at SyncHook.eval [as call] (eval at create (/Users/me/apps/hrh/csa/packages/ui/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:15:1)
    at SyncHook.lazyCompileHook (/Users/me/apps/hrh/csa/packages/ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/me/apps/hrh/csa/packages/ui/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/me/apps/hrh/csa/packages/ui/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/me/apps/hrh/csa/packages/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/me/apps/hrh/csa/packages/ui/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/me/apps/hrh/csa/packages/ui/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/me/apps/hrh/csa/packages/ui/node_modules/webpack/lib/Watching.js:77:18
    at _next1 (eval at create (/Users/me/apps/hrh/csa/packages/ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
npm ERR! Lifecycle script `start` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: [email protected] 
npm ERR!   at location: /Users/me/apps/hrh/csa/packages/ui 

Upgrading from react-scripts 4.0.3 to 5.0.1 does work around the problem, but this is not a satisfactory solution because this breaks for other reasons (no longer bundling node dependencies)

[kokokenada]

Seems npm workspaces caused version confusion. react-refresh-webpack-plugin was installed in the root, where it conflicted with react-scripts v5 from a different package. Work around was to also install webpack 4 in the root.

Edit: Installing only webpack 4 in the root led to other spooky problems. I ended up biting the bullet and upgrading to CRA 5.

[pmmmwh]

Hi, this is unfortunately somethiing we cannot work around - I believe the version of tapable (the plugin system for webpack) is different across Webpack 4 and 5, so if your workspace contains both it will have a hard time resolving it.

[dctls]

I am facing the same error what is the right solution?

[pmmmwh]

I am facing the same error what is the right solution?

Try to make sure you only have 1 version of tapable installed