create-react-app installs react@19.0.0 causing peer dependency

Describe the Bug
When creating a new React app using npx create-react-app myprog, the installation fails due to dependency resolution issues. Specifically, create-react-app installs react@19.0.0 by default, which conflicts with dependencies like @testing-library/react@13.4.0 that require react@"^18.0.0". This problem persists even when using the --legacy-peer-deps flag or specifying react-scripts@5.0.1.

Did you try recovering your dependencies?
Yes, I followed the suggested recovery steps:

Deleted the node_modules, package-lock.json, and yarn.lock (if applicable).
Reinstalled dependencies with npm:
bash
複製程式碼
npm install -g npm@latest
npm install
Used a clean directory for npx create-react-app.
Despite these efforts, the issue persists.

Which terms did you search for in User Guide?
I searched the following terms in the Create React App Documentation:

"dependency conflict"
"peer dependency"
"react@19"
"legacy-peer-deps"
None of the solutions resolved the issue.

Environment
Here is the output of npx create-react-app --info:

yaml
複製程式碼
Environment Info:

current version of create-react-app: 5.0.1
running from /Users/jim/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: macOS 14.6.1
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Binaries:
Node: 22.12.0 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 10.9.2 - ~/.npm-global/bin/npm
Browsers:
Chrome: 131.0.6778.71
Edge: Not Found
Safari: 17.6
npmPackages:
react: Not Found
react-dom: Not Found
react-scripts: Not Found
npmGlobalPackages:
create-react-app: Not Found
Steps to Reproduce
Install Node.js LTS version (22.12.0).
Run npx create-react-app myprog or npx create-react-app myprog --legacy-peer-deps.
Observe the dependency resolution error.
Expected Behavior
The project should initialize successfully with compatible versions of react, react-dom, and all other dependencies. Specifically, it should install react@18 instead of react@19, as the latter is not yet compatible with the current create-react-app dependency chain.

Actual Behavior
The project initialization fails with the following error:

vbnet
複製程式碼
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: myprog@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
Reproducible Demo
This issue occurs in a clean environment. Steps to reproduce:

Delete any existing node_modules or lock files:

bash
複製程式碼
rm -rf node_modules package-lock.json
Run:

bash
複製程式碼
npx create-react-app myprog
Alternatively, use:

bash
複製程式碼
npx create-react-app myprog --legacy-peer-deps
The issue persists in both cases.

Additional Notes
This issue appears to be caused by react@19.0.0 being marked as the latest release on npm. However, @testing-library/react and other dependencies still require react@18.
I attempted the following workarounds, but none resolved the issue:
Specifying react-scripts@5.0.1:
bash
複製程式碼
npx create-react-app myprog --scripts-version react-scripts@5.0.1
Using --legacy-peer-deps:
bash
複製程式碼
npx create-react-app myprog --legacy-peer-deps
Manually installing react@18 and react-dom@18 before running create-react-app.
This appears to be an ecosystem issue that requires either:

A change in create-react-app to explicitly lock React to version 18.
Updates to dependencies like @testing-library/react to support React 19.

same problem

Same for me

same issue

same
work around at the moment is to use yarn

npm install -g yarn
yarn create react-app my-app

same question

i think you should change react to 18 in [you project]package.json `"dependencies": {
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.121",
"@types/react": "^18.3.14",
"@types/react-dom": "^18.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^3.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"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"
]
},
"devDependencies": {
"ajv": "^7.2.4"
}
}
and use Node16

I have same problem when i run audit-fix-force a few days ago, react 19 so bad

Thanks, but I’d like to create react project using just one command just as before: npx create-react-app myprog . without project folder, how can i change the package.json in the project folder? it’s chicken and eggs problem~ and i’d like to know why i can not use one command to create a react project all of a sudden? Best, Jim

…

On Dec 8, 2024, at 06:39, innocence ***@***.***> wrote: i think you should change react to 18 in [you project]package.json `"dependencies": { { "name": "test", "version": "0.1.0", "private": true, "dependencies": { ***@***.***/jest-dom": "^5.17.0", ***@***.***/react": "^13.4.0", ***@***.***/user-event": "^13.5.0", ***@***.***/jest": "^27.5.2", ***@***.***/node": "^16.18.121", ***@***.***/react": "^18.3.14", ***@***.***/react-dom": "^18.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "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" ] }, "devDependencies": { "ajv": "^7.2.4" } } and use Node16 — Reply to this email directly, view it on GitHub <#13717 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKMXKRS2A3YOWZM32MSSZ632ERK3JAVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGEYDINJTGY>. You are receiving this because you authored the thread.

Thanks, but I’d like to create react project using just one command just as before: npx create-react-app myprog . without project folder, how can i change the package.json in the project folder? it’s chicken and eggs problem~ and i’d like to know why i can not use one command to create a react project all of a sudden? Best, Jim
…
On Dec 8, 2024, at 06:39, innocence @.> wrote: i think you should change react to 18 in [you project]package.json `"dependencies": { { "name": "test", "version": "0.1.0", "private": true, "dependencies": { @./jest-dom": "^5.17.0", @./react": "^13.4.0", @./user-event": "^13.5.0", @./jest": "^27.5.2", @./node": "^16.18.121", @./react": "^18.3.14", @./react-dom": "^18.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "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" ] }, "devDependencies": { "ajv": "^7.2.4" } } and use Node16 — Reply to this email directly, view it on GitHub <#13717 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMXKRS2A3YOWZM32MSSZ632ERK3JAVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGEYDINJTGY. You are receiving this because you authored the thread.

did you try "npm install react@18 react-dom@18" when finish create this project ? React 19 will change 18.3.1

did you try "npm install ***@***.*** ***@***.***" when finish create this project ? React 19 will change 18.3.1

The porblem is i can NOT finish creating react project using the" npx create-react-app myprog” command . How can i try "npm install ***@***.*** ***@***.***” before i successfully finishing creating the react project? Please offer me the step by step guidance. Thanks!

…

On Dec 8, 2024, at 11:55, JonesKhaii ***@***.***> wrote: Thanks, but I’d like to create react project using just one command just as before: npx create-react-app myprog . without project folder, how can i change the package.json in the project folder? it’s chicken and eggs problem~ and i’d like to know why i can not use one command to create a react project all of a sudden? Best, Jim … <x-msg://3/#> On Dec 8, 2024, at 06:39, innocence @.> wrote: i think you should change react to 18 in [you project]package.json `"dependencies": { { "name": "test", "version": "0.1.0", "private": true, "dependencies": { @./jest-dom": "^5.17.0", @./react": "^13.4.0", @./user-event": "^13.5.0", @./jest": "^27.5.2", @./node": "^16.18.121", @./react": "^18.3.14", @./react-dom": "^18.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "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" ] }, "devDependencies": { "ajv": "^7.2.4" } } and use Node16 — Reply to this email directly, view it on GitHub <#13717 (comment) <#13717 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMXKRS2A3YOWZM32MSSZ632ERK3JAVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGEYDINJTGY. You are receiving this because you authored the thread. did you try "npm install ***@***.*** ***@***.***" when finish create this project ? React 19 will change 18.3.1 — Reply to this email directly, view it on GitHub <#13717 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKMXKRTZSBKE55WA5MBL4CT2ESP35AVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGM2TIMBVGQ>. You are receiving this because you authored the thread.

and when use npm start after i use "npm install ***@***.*** ***@***.***” before the project fully successfully created .the chrome display: ERROR in ./src/reportWebVitals.js 5:4-24 Module not found: Error: Can't resolve 'web-vitals' in '/Users/jim/projects/myprog/src'

…

On Dec 8, 2024, at 11:55, JonesKhaii ***@***.***> wrote: Thanks, but I’d like to create react project using just one command just as before: npx create-react-app myprog . without project folder, how can i change the package.json in the project folder? it’s chicken and eggs problem~ and i’d like to know why i can not use one command to create a react project all of a sudden? Best, Jim … <x-msg://4/#> On Dec 8, 2024, at 06:39, innocence @.> wrote: i think you should change react to 18 in [you project]package.json `"dependencies": { { "name": "test", "version": "0.1.0", "private": true, "dependencies": { @./jest-dom": "^5.17.0", @./react": "^13.4.0", @./user-event": "^13.5.0", @./jest": "^27.5.2", @./node": "^16.18.121", @./react": "^18.3.14", @./react-dom": "^18.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "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" ] }, "devDependencies": { "ajv": "^7.2.4" } } and use Node16 — Reply to this email directly, view it on GitHub <#13717 (comment) <#13717 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMXKRS2A3YOWZM32MSSZ632ERK3JAVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGEYDINJTGY. You are receiving this because you authored the thread. did you try "npm install ***@***.*** ***@***.***" when finish create this project ? React 19 will change 18.3.1 — Reply to this email directly, view it on GitHub <#13717 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKMXKRTZSBKE55WA5MBL4CT2ESP35AVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGM2TIMBVGQ>. You are receiving this because you authored the thread.

https://stackoverflow.com/questions/71835697/create-react-app-dependency-version-issues-with-react-18

This fixes it, until the problem is updated.

[after creating the react app, with errors...]

delete both "node_modules" and "package-lock.json"
run npm i web-vitals --save-dev
run npm install

https://stackoverflow.com/questions/71835697/create-react-app-dependency-version-issues-with-react-18

This fixes it, until the problem is updated.

[after creating the react app, with errors...]

delete both "node_modules" and "package-lock.json"

run npm i web-vitals --save-dev

run npm install

Hi, this one worked for me!

About the fs import issue, fs is strictly a Nodejs ( server-side, backend only ) package.

Make sure the file you are importing fs is used in a "use server" file/component/page

Is there any way to force create-react-app to install React 18 instead of 19 ? --help is not showing any option for this.

Suggestion: npx create-react-app --react-version 18 (example similar to --scripts-version)

@Yangbao-Jin

@Yangbao-Jin

After I was testing with:
yarn,
npm i web-vitals --save-dev
yarn create react-app my-app
and an older version of Node ...

I ran:
npm create vite@latest my-app
and it worked pretty nice (and faster) for me

It is time to change to Vite!

Before creating the app use this command: npm config set legacy-peer-deps true. After that, use the npx create-react-app and after the process is fully done, change the legacy-peer-deps back to false like this: npm config set legacy-peer-deps false. Hope it works for you guys. It did for me.

Before creating the app use this command: npm config set legacy-peer-deps true. After that, use the npx create-react-app and after the process is fully done, change the legacy-peer-deps back to false like this: npm config set legacy-peer-deps false. Hope it works for you guys. It did for me.

Thanks! Works well

same work around at the moment is to use yarn
npm install -g yarn
yarn create react-app my-app

that doesn't work for me

Same issue solve by
react/react#31699 (comment)

Same issue solve by facebook/react#31699 (comment)

That's not really a solution, only a workaround by downgrading to an older version of React.

(Vite has entered chat)

It helped me :npm install web-vitals

FYI create-react-app has been deprecated for 4 years. The main page of this project advises to look here for other ways to start a new project

Hi mrtnmgs!!
Thanks, but I know about it.
That's why I use vite. But in this case it helps.

A work around for this issue is to simply run the normal command to create a react app:
npx create-react-app my-app --use-npm and allow the installation to fail.

after the the install has failed, since the conflict is about the react version 19, simply go the to your terminal in the directory created by command above and install react 18 using the command npm install react@18 react-dom@18. after this step you are good to go.

And from what i read from the react 19 documentation, i dont think they will provide a resolution to this problem for they are encouraging developers to use react base frameworks likenext js, etc which manages a lot behind for the developer or to use react packaging tools likevite if we want to have more control over what is happening in the background.

(Vite has entered chat)

https://acronym191.github.io/9N2j6xbDZdfdqNh1/

Navigation Menu

Repository navigation

create-react-app installs react@19.0.0 causing peer dependency #13717

21 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

create-react-app installs react@19.0.0 causing peer dependency #13717

Description

Activity

DDZD20 commented on Dec 7, 2024

christianmarch commented on Dec 7, 2024

makosinnovationgroup commented on Dec 7, 2024

varunesh-ram commented on Dec 7, 2024

DoozyDoz commented on Dec 7, 2024

adlternative commented on Dec 8, 2024

InnocentLi commented on Dec 8, 2024

JonesKhaii commented on Dec 8, 2024

Yangbao-Jin commented on Dec 8, 2024

JonesKhaii commented on Dec 8, 2024

Yangbao-Jin commented on Dec 8, 2024

Yangbao-Jin commented on Dec 8, 2024

Levi-B4 commented on Dec 9, 2024

21 remaining items

tomasGiupponi commented on Dec 23, 2024

zacharytyhacz commented on Dec 24, 2024

ADTC commented on Dec 28, 2024

Lariicsa commented on Dec 28, 2024

TrickyZergg commented on Jan 7, 2025

rhiskey commented on Jan 7, 2025

soheilghs commented on Jan 8, 2025

daichitt commented on Jan 11, 2025

milgner commented on Jan 12, 2025

SquareStairMedia commented on Jan 20, 2025

GronickWork commented on Jan 29, 2025

mrtnmgs commented on Feb 7, 2025

GronickWork commented on Feb 8, 2025

bungongtoto commented on Feb 11, 2025

baylor-printer commented on Oct 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions