Keep getting "cannot read property compilation of undefined..." error for HtmlWebPackPlugin

[a-bhor]

Hello Jack, First of all, would like to thank you for such a complete tutorial video and I was really looking forward to learn how GraphQL is used on server as well as client side (I am a newbie, learning JS fullstack currently and wanted to explore GraphQL).

Unfortunately I could not complete it since I started having errors ("cannot read property compilation of undefined..") on the client side from the get go (got the template code as linked by you and was following along with the youtube video).

After combing through internet (including the issue page here of course and the youtube video comments) for the possible cause of above error, I tried everything from setting the html-webpack-plugin version to "next" in my package.json to then totally deleting my client directory and copying the whole from the latest version here.. Either I am getting the html-webpack-plugin related error or now with the latest copied version from this repo, I am getting error as:

"internal/modules/cjs/loader.js:968
  throw err;
  ^
Error: Cannot find module 'webpack/lib/container/ModuleFederationPlugin' "

I do not have yarn, I use npm install instead, can that be the cause of the issues? I feel I must be missing something basic, since many others are able to make this demo work :-(

Hoping to get some pointers from you please. If not on how to make my project work, then at least how to clone your repo and get the chat-o-matic app up and running in full.

Thanks, Archana

[jherr]

I've updated all the dependencies to the released Webpack 5 and made the monitor modifications to the webpack.config.js required to get it going. You should be good if you update the dependencies to webpack version 5.0.0 (or above) and then follow the minor modifications I made to the webpack.config.js files. These included:

• Removing the library key from the ModuleFederationPlugin configuration.
• Changing the definition of the shared key to ensure that react and react-dom are registered as singletons.

https://github.com/jherr/chat-o-matic/commit/1a4fa4d0cc9fb97f8cc79f67984eb203bdb971e2

[a-bhor]

Thank you! I cloned this repo as is and could start the server as well a client.

Next, I went to my own code (one I am writing with your follow-along tutorial) =>

1. Uninstalled webpack and html-webpack-plugin. Reinstalled with the versions suggested by you,
2. Changed webpack.config.js per your suggestions. It worked! I mean atleast it didn't throw any of the earlier errors and now I can at last resume following tutorial for the client. Thank you once again.