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