Trying to install webpack 5 with react 17 for module federation, getting this error on npm install

user_6372797 0
Viewed 842

I have a react app created with cra. I want to install webpack in order to setup module federation.

I am getting this error on running the below command:

$ npm i --D webpack@5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netlify-foot@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"~0.9" from webpack-server@0.1.2
npm ERR! node_modules/webpack-server
npm ERR!   dev webpack-server@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\AppData\Local\npm-cache\_logs\2021-06-05T15_25_05_470Z-debug.log

package.json

{
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }
}

What is the issue? How to get this working?

webpack-dev-server webpack reactjs
1 Answers

Your install command is:

npm i --D webpack@5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server

This means, it tries to add the following six packages:

  • webpack@5.24.0
  • webpack-cli
  • webpack-server
  • html-webpack-plugin
  • babel-loader
  • webpack-dev-server

But webpack-server is not a thing. Remove it.

If you look closely at your error message, it kinda tries to tell you the same thing:

npm ERR! Could not resolve dependency:

npm ERR! peer react@"~0.9" from webpack-server@0.1.2

It says that it fails to satisfy dependencies caused by this webpack-server. Make sure to get rid of it. That will at least fix this problem.

Your next problem

NOTE however, that for further customization of CRA's webpack build, given you don't want to eject, you also need a way to override it's default build settings.

For that, you might want to check out CRACO.

CRACO (like Webpack Module Federation) does not have very good documentation, but it has a few webpack-related examples here.

user_22287710
Related