create-react-app dependency version issues with React 18

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: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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):

1. delete both node_modules and package-lock.json
2. run npm i web-vitals --save-dev
3. 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

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 [email protected] and create react app.

Answer 4

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

Answer 5

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 6

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

Answer 7

Been over a year since this was asked, and in spite of the suggestion by OP that it's been fixed in new versions of create-react-app, it still hasn't been. Also, downgrading react in package.json didn't work. Had to take the risk and run the command with --legacy-peer-deps before I could get my app working.