react-scripts is using webpack version "4.44.2" instead of "^5.61.0"

I am using react-scripts version ^4.0.3 in my project. I also use react-app-rewired, stylelint and stylelint-webpack-plugin (latest versions).

When I am trying to run npm start, I am getting the following error from react-scripts installed by Create React App:

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 | 

It seems that the plugin of stylelint-webpack-plugin requires to have webpack version 5.62.1. But it founds version 4.44.2 instead.

I checked the version of webpack in package.json file of react-scripts under node_modules and found this:

"webpack": "4.44.2",

It seems that react-scripts is installing older version of webpack.

When I looked into the official package.json file of react-scirpts I found that it using webpack version 5.61.0 as expected.

https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/package.json

How come there are differences between what I have locally and what we have here in the official repo?

[sunith-kumar]

This issue is till there

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.