Suddenly React cannot execute the 'create-react-app' command. Why is this happening and how can I solve it?

Question

Even --force or --legacy-peer-deps didn't work.

Transcript:

npx create-react-app my-app

Creating a new React app in /home/zahid/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1353 packages in 2m

171 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app@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.
npm ERR!
npm ERR! See /home/zahid/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/zahid/.npm/_logs/2022-04-11T22_25_02_229Z-debug-0.log

npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^12.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

score 10 · Answer 1 · edited Apr 12 '22 at 14:10

10

This is going to solve the problem:

npm config set legacy-peer-deps true

Explanation:

The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.
npx create-react-app my-app

edited Apr 12 '22 at 14:10

Peter Mortensen

30,738
21
105
131

answered Apr 12 '22 at 08:10

Andres R. Bucheli

99
2

3

OP mentioned "*--legacy-peer-deps didn't worked*", how is this different? – Bergi Apr 12 '22 at 11:00
1

Not sure what error OP has encountered; setting `legacy-peer-deps` do work for me as well. Instead of modifying default npm config, I used environment variable to turn on `legacy-peer-deps` just for this command and it worked. The command I actually use is something like `npm_config_legacy_peer_deps=true npx create-react-app my-app` – MrOrz Apr 12 '22 at 13:05
3

This is the *only* answer that explains the magic command line invocations. All the others are "try this" answers. – Peter Mortensen Apr 12 '22 at 14:13
1

This is also the only answer that worked for me too – Mitch Apr 13 '22 at 12:22

score 6 · Answer 2 · edited Apr 12 '22 at 12:42

6

npm config set legacy-peer-deps true

Executing that helped me (on Linux).

edited Apr 12 '22 at 12:42

ouflak

2,458
10
44
49

answered Apr 12 '22 at 02:41

bey

77
2

5

What does this do? How does it work? OP mentioned "*--legacy-peer-deps didn't worked*", how is this different? – Bergi Apr 12 '22 at 10:59
I ran a wrong code with legacy-peer-deps. That's why didn't worded for me on linux. But above answered code worked for me nicely. Thanks. – BM. Zahidul Islam Apr 15 '22 at 11:01

score 1 · Answer 3 · edited Apr 12 '22 at 13:59

1

Here is what worked for me:

Run npx create-react-app as normal and got the errors
Go into the package.json file and change the React version from 18.0.0 to 17.0.0
Delete the node_modules folder.
Then run npm install.

No more errors.

edited Apr 12 '22 at 13:59

Peter Mortensen

30,738
21
105
131

answered Apr 12 '22 at 02:56

Dale Bendixen

19
2

2

Didn't work for me on Mac – Eyong Kevin Enowanyo Apr 12 '22 at 08:49

score 1 · Answer 4 · answered Apr 12 '22 at 15:32

This works for me

I changed this in my package.json (I downgraded the versions):

"react": "^18.0.0",
"react-dom": "^18.0.0",

To

"react": "^17.0.0",
"react-dom": "^17.0.0",

Then, remember to remove your folder /nodes_modules and run this in your project main folder:

npm i

score 0 · Accepted Answer · edited Apr 12 '22 at 14:18

0

Try to run this first:

npm config set legacy-peer-deps true

And try your command again. It worked with me!

edited Apr 12 '22 at 14:18

Peter Mortensen

30,738
21
105
131

answered Apr 12 '22 at 02:49

Alex Lee

34
2

3

What does this do? How does it work? OP mentioned "*--legacy-peer-deps didn't worked*", how is this different? – Bergi Apr 12 '22 at 11:01
I ran a wrong code with legacy-peer-deps. That's why didn't worded for me on linux. But above answered code worked for me nicely. Thanks. @Bergi – BM. Zahidul Islam Apr 15 '22 at 11:03

score 0 · Answer 6 · edited Apr 12 '22 at 14:01

0

Try to run this command first:

npm config set legacy-peer-deps true

and then type the command

npx create-react-app app-name

It worked for me.

edited Apr 12 '22 at 14:01

Peter Mortensen

30,738
21
105
131

answered Apr 12 '22 at 04:46

Super Addy

7
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 12 '22 at 05:47

score 0 · Answer 7 · edited Apr 12 '22 at 14:06

0

Try this:

Delete folder node_modules and file package-lock.json
Go to file package.json and change both react and react-dom's version to 17.0.0
Now run npm install

Things should now work as expected.

edited Apr 12 '22 at 14:06

Peter Mortensen

30,738
21
105
131

answered Apr 12 '22 at 06:07

Vivek Kumar

113
2
4

1

An explanation would be in order. E.g., why is it necessary to change the version number? What is it supposed to achieve? What is the idea/gist? Why does it work? From [the Help Center](https://stackoverflow.com/help/promotion): *"...always explain why the solution you're presenting is appropriate and how it works"*. Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/71837844/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Apr 12 '22 at 14:08

Suddenly React cannot execute the 'create-react-app' command. Why is this happening and how can I solve it?

7 Answers7