TypeError: Cannot read property 'Compilation' of undefined

[arielweinberger]

Thanks for the great book!

On page 29, after creating the Yarn Workspaces monorepo, deleting all yarn.lock and node_modules from the packages (nav and home), running yarn to install dependencies and then yarn start gives me the following:

$ concurrently "wsrun --parallel start"
[0] nav
$ webpack-dev-server --open --mode development
[0] home
$ webpack-dev-server --open --mode development
[0] nav
[0]  | TypeError: Cannot read property 'Compilation' of undefined
[0]  |     at /Users/arielweinberger/Development/module-federation-book/node_modules/html-webpack-plugin/index.js:222:19
[0]  |     at Hook.eval [as call] (eval at create (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:33:1)
[0]  |     at Hook.CALL_DELEGATE [as _call] (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/Hook.js:14:14)
[0]  |     at Compiler.newCompilation (/Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Compiler.js:915:30)
[0]  |     at /Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Compiler.js:957:29
[0]  |     at Hook.eval [as callAsync] (eval at create (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
[0]  |     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/Hook.js:18:14)
[0]  |     at Compiler.compile (/Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Compiler.js:952:28)
[0]  |     at /Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Watching.js:113:19
[0]  |     at Hook.eval [as callAsync] (eval at create (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[0] home
[0]  | TypeError: Cannot read property 'Compilation' of undefined
[0]  |     at /Users/arielweinberger/Development/module-federation-book/node_modules/html-webpack-plugin/index.js:222:19
[0]  |     at Hook.eval [as call] (eval at create (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:31:1)
[0]  |     at Hook.CALL_DELEGATE [as _call] (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/Hook.js:14:14)
[0]  |     at Compiler.newCompilation (/Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Compiler.js:915:30)
[0]  |     at /Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Compiler.js:957:29
[0]  |     at Hook.eval [as callAsync] (eval at create (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
[0]  |     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/Hook.js:18:14)
[0]  |     at Compiler.compile (/Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Compiler.js:952:28)
[0]  |     at /Users/arielweinberger/Development/module-federation-book/node_modules/webpack/lib/Watching.js:113:19
[0]  |     at Hook.eval [as callAsync] (eval at create (/Users/arielweinberger/Development/module-federation-book/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[0] nav
error Command failed with exit code 1.
[0] home
error Command failed with exit code 1.

The strange thing is that if I cd packages/home (or nav) and try to run yarn start it still does not work.

Even after removing the workspaces (should technically be the same setup as page 25), I get the same error.

I had to start all over again to get back to page 25 where I have both nav and home working, but can't get past this point because I am facing this error.

Could be that the issue is somewhere else, but just creating this ticket to inform you. Feel free to close it.

Update: Cloning the example from Chapter 2 seems to work fine. Maybe I did something wrong.

[arielweinberger]

Update #2:

Following the book, this is the devDependencies content I get in package.json for home/nav:

    "@babel/core": "7.9.6",
    "@babel/plugin-transform-runtime": "^7.12.0",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "7.9.4",
    "babel-loader": "8.1.0",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "next",
    "style-loader": "1.2.1",
    "webpack": "5.0.0",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.11.0"

This one shows the errors I've included above.

Doing some stitching based on the example here in the repo, I managed to get it to work by having the following in each backage (home and nav:

  "devDependencies": {
    "@babel/core": "7.10.2",
    "@babel/plugin-transform-runtime": "^7.12.0",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "7.10.1",
    "babel-loader": "8.1.0",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^1.2.1",
    "webpack": "5.0.0",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.11.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }

Couldn't isolate the specific dependency that causes this.

Just an FYI, not sure if others are facing this. I am running on MacOS Big Sur, M1, Node 15 (tried on Node 12 as well, same thing).

[tommymcdonald]

I'm encountering the issue with the exact same specs (M1, Node 15), and the package updates allowed me to move forward. Thanks!

[stoyan-ekupov]

For me downgrading html-webpack-plugin to 4.5.0 solved the issue. I also used the yarn.lock from chapter 2, so there might be other dependencies which affect this.