npm start issue

[RonRofe]

I have installed the react-app-rewired package in my project. Then I changed my start script to react-app-rewired start.

Using npm start, I'm receiving the following from the compiler:

There might be a problem with the project dependency tree.
project | It is likely not a bug in Create React App, but something you need to fix locally.
project | 
project | The react-scripts package provided by Create React App requires a dependency:
project | 
project |   "webpack": "4.44.2"
project | 
project | Don't try to install it manually: your package manager does it automatically.
project | However, a different version of webpack was detected higher up in the tree:
project | 
project |   /var/node/app/node_modules/webpack (version: 5.62.1) 
project | 
project | Manually installing incompatible versions is known to cause hard-to-debug issues.
project | 
project | If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
project | That will permanently disable this message but you might encounter other issues.
project | 
project | To fix the dependency tree, try following the steps below in the exact order:
project | 
project |   1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
project |   2. Delete node_modules in your project folder.
project |   3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
project |   4. Run npm install or yarn, depending on the package manager you use.
project | 
project | In most cases, this should be enough to fix the problem.
project | If this has not helped, there are a few other things you can try:
project | 
project |   5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
project |      This may help because npm has known issues with package hoisting which may get resolved in future versions.
project | 
project |   6. Check if /var/node/app/node_modules/webpack is outside your project directory.
project |      For example, you might have accidentally installed something in your home folder.
project | 
project |   7. Try running npm ls webpack in your project folder.
project |      This will tell you which other package (apart from the expected react-scripts) installed webpack.
project | 
project | If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
project | That would permanently disable this preflight check in case you want to proceed anyway.
project | 
project | P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
project | 

My config-overrides.js file:

// const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  webpack: function (config, env) {
    // if (env === 'development') {
    //   config.plugins.push(
    //     new StylelintPlugin({
    //       // options here
    //     }),
    //   );
    // }

    return config;
  },
};

Styleint in package.json:

    "stylelint-webpack-plugin": "^3.1.0",
    "stylelint": "^14.0.1",

Help?

[dawnmist]

What dependencies/devDependencies do you have listed in your package.json file?

[dawnmist]

For the stylelint-webpack-plugin, it appears that the last version of that package to support webpack 4 was version 2.2.2. If you've installed version 3+, it may be pulling in webpack 5 with it. Please try downgrading styleling-webpack-plugin to version 2.2.2.

[RonRofe]

For the stylelint-webpack-plugin, it appears that the last version of that package to support webpack 4 was version 2.2.2. If you've installed version 3+, it may be pulling in webpack 5 with it. Please try downgrading styleling-webpack-plugin to version 2.2.2.

@dawnmist Why do I need to support webpack version 4 instead of 5?

[dawnmist]

Because from your original error messages, react-scripts (which holds all the create-react-app build scripts) requires you to use webpack 4, as stated here:

project | The react-scripts package provided by Create React App requires a dependency:
project | 
project |   "webpack": "4.44.2"

The entire error message you provided is react-scripts from create-react-app telling you that it has detected the wrong version of webpack installed - it needs webpack 4 and found webpack 5 instead. It then gives you an environment variable you can use to skip checking the webpack version, but warns that the build scripts may break if you use the environment variable to override the "preflight" version check for webpack in react-scripts. It also tells you some possible debugging steps you could take for trying to get the correct version installed if the installation of webpack 5 had been by mistake.

Please note: this error message comes from create-react-app. It is not caused by react-app-rewired in any way, it is caused by the other node_modules packages you have installed, most likely one or more plugins that depend on webpack 5. I commented on the stylelint plugin because it was the only plugin listed anywhere in the information you provided and on checking the release information for that plugin on its github page I could see that the plugin had dropped support for webpack 4 with version 3.0.0 so it may have been a way that webpack 5 ended up being accidentally installed.

You will need to check any other webpack plugins you have also installed for the same issue, and downgrade any that no longer support webpack 4 to the last version that did support webpack 4.

[christopanayotovvia]

Have the same issue. Guys, Webpack 5 is the norm in the end of 2021, please update the package to reflect it. I see that react-app-rewired requires old versions of html-webpack-plugin@4.5.0, optimize-css-assets-webpack-plugin@5.0.4, webpack-manifest-plugin@2.2.0 , terser-webpack-plugin@1.4.5 , workbox-webpack-plugin@5.1.4 all of which requirewebpack@4.44.2 , but all other packages are require for webpack@5.64.4. Updating these dependencies in react-app-rewired will solve the issue.

[dawnmist]

@christopanayotovvia All of the dependencies you have highlighted come from Create React App's react-scripts package, not from react-app-rewired itself. I'd suggest that you make your demands to the Create React App project upstream, as we do not have control over what packages they use.

This is the dependencies that react-app-rewired requires: https://github.com/timarney/react-app-rewired/blob/b7b4bea299c9fe67f77b736d10d1f9482dea6459/package.json#L18-L26

[timarney]

Closing --- as it doesn't seem to be a issue with this repo