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.

Update: This is not fixed. I am still facing this issue after following all the recommended practices. — Frozenfrank
– Frozenfrank, Commented Feb 13 at 16:17

Gavriel · Accepted Answer · 2022-04-12 17:38:42Z

22

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

edited Apr 12, 2022 at 17:38

answered Apr 12, 2022 at 1:32

Gavriel

3602 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DigiFreeze Over a year ago

Any idea on what's causing the underlying issue? Seems to be a webpack config. (I'm having the same issue).

hayata_suenaga Over a year ago

I tried Gavriel's solution. The downloaded node-modules are missing web-vitals. Does someone have any idea why create-react-app can result in missing dependencies?

Gavriel Over a year ago

@DigiFreeze I think the issue is being cause by a recent merge they did to the "react-testing-library". They changed it to only supports React < 18. You can read more here & here

Vinoth Over a year ago

it didn't worked for me

dreamers-blog Over a year ago

@hayata_suenaga try running npm i web-vitals --save-dev if it gives out the error : 'Module not found: Error: Can't resolve 'web-vitals''

|

DougM · Accepted Answer · 2022-04-12 03:47:23Z

8

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

edited Apr 12, 2022 at 3:47

answered Apr 12, 2022 at 3:33

DougM

9402 gold badges13 silver badges30 bronze badges

3 Comments

Akshit Baunthiyal Over a year ago

Thank you! Can confirm this works for the typescript template (the name of the package is cra-template-typescript). I didn't have to remove reportWebVitals either.

Jonny Over a year ago

I wanted to take the custom templating approach but when I run "npm install cra-template" in a different directory I get the following message "up to date, audited 4 packages in 1s" but nothing is installed in that directory. There is no template.json to modify. Any pointers on this would be really appreciated.

Bergi Over a year ago

react, react-dom, @testing-library/react - which of the mentioned packages is the culprit?

dreamers-blog · Accepted Answer · 2022-04-13 09:55:46Z

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

edited Apr 13, 2022 at 9:55

answered Apr 12, 2022 at 11:31

dreamers-blog

1145 bronze badges

Comments

Tauleshwar Thakur · Accepted Answer · 2022-04-12 18:17:24Z

1

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.

edited Apr 12, 2022 at 18:17

answered Apr 12, 2022 at 18:06

Tauleshwar Thakur

394 bronze badges

Comments

Khanh D Trần · Accepted Answer · 2022-04-13 08:58:43Z

1

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

answered Apr 13, 2022 at 8:58

Khanh D Trần

1941 silver badge4 bronze badges

Comments

Cedric Ipkiss · Accepted Answer · 2023-07-11 23:40:58Z

0

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.

answered Jul 11, 2023 at 23:40

Cedric Ipkiss

6,5557 gold badges52 silver badges79 bronze badges

Comments

Eragon_18 · Accepted Answer · 2022-04-12 01:34:48Z

-2

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

answered Apr 12, 2022 at 1:34

Eragon_18

7708 silver badges12 bronze badges

Collectives™ on Stack Overflow

create-react-app dependency version issues with React 18

Solutions tried

Update

7 Answers 7

7 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Solutions tried

Update

7 Answers 7

7 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related