create-react-app dependency version issues with React 18 - npm

Question

npx create-react-app my-project results in the following dependency errors:
npx version: 8.5.0
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-18#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" 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.
The command still produces a project directory, but running npm start in the created directory errors with web-vitals missing from node-modules.
Solutions tried
Running the same command with --force or --legacy-peer-deps as suggested by the above error message doesn't solve the problem.
Deleting node_modules and package-lock.json and running npm i also doesn't solve the problem.
Update
The problem has been fixed with the latest update of create-react-app. Now it creates a project without any problem.

Answer 1

Until this is fixed for now you can delete the node_modules folder and package-lock.json. Next, open package.json and change
"react": "^18.0.0" & "react-dom": "^18.0.0" to an earlier version e.g:
"react": "^17.0.2" & "react-dom": "^17.0.2".
Finally, you can run npm install.
Alternative Solution (Try this first!):
solution suggested by joooni1998):
delete both node_modules and package-lock.json
run npm i web-vitals --save-dev
run npm install
and then you can use npm run build and npm start again

Answer 2

Check here for the Github issue.
Here is a temporary workaround:
Install cra-template to a separate folder (other than your new
project app's folder) using "npm install cra-template"
Go to the installed cra-template package folder and in file "template.json" change the line '"#testing-library/react": "^12.0.0"' to '"#testing-library/react": "^13.0.0"'
Go back to your root folder and run npx create-react-app my-app (your app name) --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE
Additionally, you can let the build fail, remove the node_modules folder as well as the package-json.lock file. Open the package.json file and change the react and react-dom to an earlier version.
For example:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Delete reportWebVitals.js
Remove import reportWebVitals from './reportWebVitals'; from index.js
Remove reportWebVitals(); from the bottom of index.js
Finally run npm install

Answer 3

It worked for me by deleting both 'node_modules' folder and 'package-lock.json' file. Then, I changed both react and react-dom version to 17.0.2 instead of 18.0.0 inside the package.json file as suggested by Gavriel's answer https://stackoverflow.com/a/71836018/12490294. Then, inside the app folder, I ran
npm i web-vitals --save-dev
Then
npm start
The app started successfully

Answer 4

Or you can try this npx --legacy-peer-deps create-react-app my-appname or goto index.js and remove the usage of web vitals
or downgrade npm with npm install -g npm#8.3.0 and create react app.

Answer 5

You could use yarn add create-react-app your-app instead

Answer 6

Try running either with --force or with --legacy-peer-deps, both will install dependencies without problems.
If that doesn't work, then delete the node modules folder and start installing from scratch