reactjsnpmcreate-react-appdependency-tree

create-react-app dependency version issues with React 18

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

Update

The problem has been fixed with the latest update of create-react-app. Now it creates a project without any problem.

Solution

  • 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