Unable to Create a New React App Using npx create-react-app

[itsRkator]

Description

I've been facing issues when creating a new React app using the npx create-react-app command for the past 1 1.5 months. Despite trying multiple solutions, the problem persists, making it impossible to set up a new React project.

Steps to Reproduce

1. Run the command: npx create-react-app my-app.
2. Attempted the following flags to bypass errors:
   • --force
   • --legacy-peer-deps
3. Tried on different systems and environments:
   • Operating Systems: Windows 10/11, macOS
   • Networks: Airtel and BSNL ISPs
4. Tested on various Node.js versions (all managed with NVM):
   • 16.x (LTS)
   • 18.x (LTS)
   • 20.x (LTS)
   • 22.x (LTS)

Expected Behavior

After running the npx create-react-app command, a new React app should be successfully created.

Actual Behavior

The command fails to complete successfully. I've attached screenshots of the errors encountered below for you to look over.

Attempts to Fix

• Used --force and --legacy-peer-deps flags.
• Tried different versions of Node.js.
• Tested on different operating systems and networks.

Environment

• OS: Windows 10/11, macOS
• Node.js: 16, 18, 20, and 22 (LTS versions)
• NPM: Latest version (installed with Node.js)
• React: The npx create-react-app version is the default fetched by NPM.

Attachments

(Screenshots of the error messages)

Additional Information

This issue has persisted across multiple environments and configurations for over a month. Please let me know if further details or debugging information are needed to assist in resolving this issue.

[lakpahana]

Could you please attach the log files as well? That would be very helpful.

Thank you!

[Nithesh0812]

try this command "npx create-react-app@latest react-18-20-5"

[itsRkator]

@Nithesh0812 This also didn't work.

@lakpahana Here are the files:
2024-12-31T01_45_25_149Z-debug-0.log
2024-12-31T01_45_25_149Z-eresolve-report.txt

[jesobreira]

Same issue here. Windows and Ubuntu.

Using --legacy-peer-deps here makes CRA complete, but running npm start fails:

[Ting-Ching-Chou]

Same issues are found in TypeScript template.

0 verbose cli /usr/local/bin/node /usr/local/bin/npm
1 info using npm@10.7.0
2 info using node@v20.14.0
3 silly config:load:file:/usr/local/lib/node_modules/npm/npmrc
4 silly config:load:file:/home/tcc/Desktop/Practice_05/my-app-2/.npmrc
5 silly config:load:file:/home/tcc/.npmrc
6 silly config:load:file:/usr/local/etc/npmrc
7 verbose title npm install @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 @types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^18.0.0 @types/react-dom@^18.0.0 typescript@^4.4.2 web-vitals@^2.1.0
8 verbose argv "install" "--no-audit" "--save" "@testing-library/jest-dom@^5.14.1" "@testing-library/react@^13.0.0" "@testing-library/user-event@^13.2.1" "@types/jest@^27.0.1" "@types/node@^16.7.13" "@types/react@^18.0.0" "@types/react-dom@^18.0.0" "typescript@^4.4.2" "web-vitals@^2.1.0"
9 verbose logfile logs-max:10 dir:/home/tcc/.npm/_logs/2024-12-31T11_35_17_028Z-
10 verbose logfile /home/tcc/.npm/_logs/2024-12-31T11_35_17_028Z-debug-0.log
11 silly logfile start cleaning logs, removing 1 files
12 silly logfile done cleaning log files
13 silly idealTree buildDeps
14 silly fetch manifest @testing-library/jest-dom@^5.14.1
15 http fetch GET 200 https://registry.npmjs.org/@testing-library%2fjest-dom 850ms (cache updated)
16 silly fetch manifest @testing-library/react@^13.0.0
17 http fetch GET 200 https://registry.npmjs.org/@testing-library%2freact 120ms (cache updated)
18 silly fetch manifest react@^19.0.0
19 http fetch GET 200 https://registry.npmjs.org/react 19ms (cache hit)
20 silly fetch manifest react@^18.0.0
21 verbose stack Error: unable to resolve dependency tree
21 verbose stack     at #failPeerConflict (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1386:25)
21 verbose stack     at #loadPeerSet (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1352:33)
21 verbose stack     at async #buildDepStep (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:923:11)
21 verbose stack     at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:203:7)
21 verbose stack     at async Promise.all (index 1)
21 verbose stack     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:131:5)
21 verbose stack     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:150:5)
21 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5)
22 verbose cwd /home/tcc/Desktop/Practice_05/my-app-2
23 verbose Linux 5.15.0-130-generic
24 verbose node v20.14.0
25 verbose npm  v10.7.0
26 error code ERESOLVE
27 error ERESOLVE unable to resolve dependency tree
28 error
29 error While resolving: my-app-2@0.1.0
29 error Found: react@19.0.0�[2m�[22m
29 error �[2mnode_modules/react�[22m
29 error   react@"^19.0.0" from the root project
29 error
29 error Could not resolve dependency:
29 error �[95mpeer�[39m react@"^18.0.0" from @testing-library/react@13.4.0�[2m�[22m
29 error �[2mnode_modules/@testing-library/react�[22m
29 error   @testing-library/react@"^13.0.0" from the root project
29 error
29 error Fix the upstream dependency conflict, or retry
29 error this command with --force or --legacy-peer-deps
29 error to accept an incorrect (and potentially broken) dependency resolution.
30 error
30 error
30 error For a full report see:
30 error /home/tcc/.npm/_logs/2024-12-31T11_35_17_028Z-eresolve-report.txt
31 verbose exit 1
32 verbose code 1
33 silly unfinished npm timer reify 1735644917402
34 silly unfinished npm timer reify:loadTrees 1735644917438
35 silly unfinished npm timer idealTree:buildDeps 1735644918531
36 silly unfinished npm timer idealTree:#root 1735644918532
37 error A complete log of this run can be found in: /home/tcc/.npm/_logs/2024-12-31T11_35_17_028Z-debug-0.log

[tabax]

Still reproducible with node 23.5.0 (via nvm, OS: Windows 11) as well:

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\xxx\AppData\Local\npm-cache\_logs\2025-01-01T14_37_00_042Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\xxx\AppData\Local\npm-cache\_logs\2025-01-01T14_37_00_042Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

[tabax]

This is an unmaintained project (see: reactjs/react.dev#5487).

[tonydiep]

create-react-app does not create a working react app for me either in Ubuntu 24.04
npm start does start but displays page with error message

ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in 

[tonydiep]

Here's what resolves it:

npm i web-vitals

I gotta say I'd prefer if this 'hello world' program didn't track and report users' behaviour with web-vitals. Someone using this is trying out react, not signing up to report anybody's activity.

[itsRkator]

This is an unmaintained project (see: reactjs/react.dev#5487).

@tabax I found no official documentation supporting your words on the official create-react-app repository, and official react documentation. Even the official reaction.dev documentation is for Next.js and also suggests using npx create-next-app@latest to create a new next app, though we are talking about React.js, not Next.js. See: https://react.dev/learn/start-a-new-react-project

[anipnwr7777]

@itsRkator There are a bunch of solutions available out there for this issue. React is coming with major v19 but peers are expecting react to be in v18 and hence the issues.

After the error comes up cd inside the project and install the latest version of peers which will depend on v19 of react and the issue will be resolved.

npm install @testing-library/jest-dom@latest @testing-library/react@latest @testing-library/user-event@latest web-vitals@latest

after this npm start should fix the issue.

[kwikwag]

This is indeed all very confusing.
The reactjs react.dev repo says create-react-app is dead.
After using create-react-app and running for the first time, one is presented with the message "babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore." [sic]
However https://github.com/facebook/create-react-app/ has no mention of this, nor does the website.
Anyway, the React website does give other options.
If you still want to, npx yarn create react-app xxx seems to be working.

[vdespa]

I've been using this for years in educational examples but now it's time to move on.

So people, stop wasting your precious time with this unmaintained project. This error has been reported for weeks already.

At least give a chance to other projects like Vite, which work, are maintained, and have amazing documentation and community support.

Here is what you need to get started:

npm create vite@latest my-app -- --template react

It's almost the same setup that this tool creates, with the only minor disadvantage that you need to set up tests afterward. But this can also be solved in just 2-3 minutes by following a tutorial.