TypeError: The 'compilation' argument must be an instance of Compilation after yarn 3 update

181 Views Asked by At

I've been looking into this issue off an on for a few days and I can't find a good path forward.

First off I'm attempting to move our monorepo from yarn 1.22 to yarn 3 to increase dependency install speed. The migration steps outlined by yarn are pretty straightforward, but our monorepo has a fair amount of build steps to step through. I only mention this because this problem has only come up when trying to make this switch.

Our monorepo has several frontend projects and we have a tool that manages doing builds and running tests. I've isolated this problem to the yarn build step. When running yarn build I run into the following error:

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/myuser/workspace/monorepo/web/tools/webpack/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:151:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/myuser/workspace/monorepo/web/tools/webpack/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /Users/myuser/workspace/monorepo/web/tools/webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:183:53
    at Hook.eval [as call] (eval at create (/Users/myuser/workspace/monorepo/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:102:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/myuser/workspace/monorepo/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/myuser/workspace/monorepo/node_modules/webpack/lib/Compiler.js:1124:26)
    at /Users/myuser/workspace/monorepo/node_modules/webpack/lib/Compiler.js:1168:29
    at Hook.eval [as callAsync] (eval at create (/Users/myuser/workspace/monorepo/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/myuser/workspace/monorepo/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/myuser/workspace/monorepo/node_modules/webpack/lib/Compiler.js:1163:28)

First thing I found researching this issue was that many said it could either be an issue with the node install or it likely could be an issue arising from having multiple versions of webpack installed. I've done several steps that I think would help me here: I cleared cache from nvm, cleared cache from yarn, deleted all node_module folders from the monorepo, and reinstalled all dependencies. No difference from any of these changes. I have yet to try reinstalling my current version of node, but I don't currently see where that might fix it.

Next I stepped through all of our dependenies in the project and was able to sync everything up to [email protected]

yarn why webpack
├─ @monorepo/ui-react@workspace:web/packages/ui-react [3e9d5]
│  └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])
│
├─ @monorepo/ui-react@workspace:web/packages/ui-react [6105e]
│  └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])
│
├─ @monorepo/ui-react@workspace:web/packages/ui-react [85f66]
│  └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])
│
├─ @monorepo/ui-react@workspace:web/packages/ui-react [bf190]
│  └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])
│
├─ @monorepo/ui-react@workspace:web/packages/ui-react
│  └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])
│
├─ @monorepo/webpack@workspace:web/tools/webpack
│  └─ webpack@npm:5.86.0 [b35f9] (via npm:^5.86.0 [b35f9])
│
├─ react-scripts@npm:5.0.1
│  └─ webpack@npm:5.86.0 (via npm:^5.64.4)
│
├─ react-scripts@npm:5.0.1 [d10d4]
│  └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])
│
└─ react-scripts@npm:5.0.1 [dc2b7]
   └─ webpack@npm:5.86.0 [dc2b7] (via npm:^5.86.0 [dc2b7])

I don't know if yarn build is possibly going through multiple webpack installs still or not, but the version at least matches everywhere.

Next I stepped through our webpack configuration since that seems to be the culprit. The output earlier suggests that is stems from the SourceMapDevToolPlugin. When I remove this plugin from config.js in our webpack tooling, I am able to build successfully.

  // This was removed
  new webpack.SourceMapDevToolPlugin({
        noSources: false,
        filename: '[name].[fullhash].js.map',
    }),

I don't actually want to remove this plugin since we need it for source mapping in our logging tool. But I'm happy to find a place where the cause is coming from.

Unfortunately I'm stuck at this point, I don't know how to move forward with keeping this plugin intact but removing this Compilation TypeError. Any ideas or suggestions welcome. The yarn v3 world seems to have a handful of differences and I'm not sure which path is going to be the right one to sink more time into.

For instance we make use of the nohoist setting for our webpack tooling on our root package.json, but it looks like this is just a deprecated feature, it doesn't look like using it should be causing any issues.

0

There are 0 best solutions below