create-react-app installs [email protected] causing peer dependency

[Yangbao-Jin]

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 [email protected] by default, which conflicts with dependencies like @testing-library/[email protected] that require react@"^18.0.0". This problem persists even when using the --legacy-peer-deps flag or specifying [email protected].

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: [email protected] npm error Found: [email protected] 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/[email protected] 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 [email protected] 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 [email protected]: bash 複製程式碼 npx create-react-app myprog --scripts-version [email protected] 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.

[DDZD20]

same problem

[christianmarch]

Same for me

[makostechsolutions]

same issue

[varunesh-ram]

same issue

[DoozyDoz]

same work around at the moment is to use yarn

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

[adlternative]

same question

[InnocentLi]

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

[JonesKhaii]

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

[Yangbao-Jin]

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 https://github.com/facebook/create-react-app/issues/13717#issuecomment-2526104536, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMXKRS2A3YOWZM32MSSZ632ERK3JAVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGEYDINJTGY. You are receiving this because you authored the thread.

[JonesKhaii]

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

[Yangbao-Jin]

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) https://github.com/facebook/create-react-app/issues/13717#issuecomment-2526104536>, 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 https://github.com/facebook/create-react-app/issues/13717#issuecomment-2526354054, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMXKRTZSBKE55WA5MBL4CT2ESP35AVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGM2TIMBVGQ. You are receiving this because you authored the thread.

[Yangbao-Jin]

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) https://github.com/facebook/create-react-app/issues/13717#issuecomment-2526104536>, 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 https://github.com/facebook/create-react-app/issues/13717#issuecomment-2526354054, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMXKRTZSBKE55WA5MBL4CT2ESP35AVCNFSM6AAAAABTF3KJZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWGM2TIMBVGQ. You are receiving this because you authored the thread.

[Levi-B4]

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...]

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

[anshukumar-kiwi]

I am also facing this issue idk why it is coming. I am not able to run the create-react-app command.

[rosiehiggins]

same problem for me. I can't see that any tsconfig.json file was created

[elitekbtu]

how to solve the same problem? I thought I made the problem

[dschilling]

same work around at the moment is to use yarn

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

The workaround by @DoozyDoz does indeed work. Thanks Doozy!

The other suggested workarounds (edit package.json or run npm install) cannot work because they depend on the app already existing, but it doesn't yet because create-react-app cannot complete successfully. It fails partway through, leaving the app in a half-created state.

Actually - maybe they do work for a plain JS app - I don't know. I'm creating an app using the typescript template, and create-react-app fails before adding any typescript-specific pieces, and there's no way to ask it to resume because it expects the folder to be empty.

[juanbautistavp]

I'm having the same problem

[aymengraoui]

Hi everyone,

In the package json specify react and react-dom versions, this worked for me.

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

Cheers.

[axalix]

Is this project abandoned? last commit was 4 months ago. Tons of opened issues and MRs with no attention.

[JoeBrar]

Same problem. create-react-app installs @testing-library/react version 13.0.0 which is outdated and does not support the latest react version, hence causing the peer dependency.

[EJT21]

Same problem

[Qin-hz]

Temporary measures： create-react-app/createReactApp.js const allDependencies = ['react', 'react-dom', packageToInstall]; to const allDependencies = ['react@^18.3.1', 'react-dom@^18.3.1', packageToInstall];

[TDaniel-evo]

I used create-vite to setup the boilerplate code for a react app: https://vite.dev/guide/#scaffolding-your-first-vite-project

[qaidjoharj53]

Having trouble with Create React App (CRA)? Consider switching to Vite, a modern build tool offering a faster, smoother React development experience.

Here's how to set up a new React project using Vite:

# Create new Vite project
npm create vite@latest my-react-app

# Navigate to project directory
cd my-react-app

# Install dependencies
npm install

# Start dev server
npm run dev

Switching to Vite can save time and reduce complexity, especially if you're encountering errors with CRA. Give it a try and let me know how it works for you!

[axalix]

@qaidjoharj53 did you try it yourself? What React version have you got installed? Did you read the title? This is what I am getting

    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",

Vite doesn't maintain React 19 [yet]: https://github.com/vitejs/vite/pull/18917

[qaidjoharj53]

@axalix I understand the title is about React 19. I shared the Vite solution because, as of now, there are no official fixes from React or CRA for this issue. While Vite doesn’t yet support React 19, this method provides a way for us developers to continue development workflow with React 18, avoiding CRA issues in the meantime.

[axalix]

@qaidjoharj53 I appreciate your intention, but this thread is not about Vite, nor about React 18.

[Jjqcoder]

It looks like a react19-related issue, and some react19-based websites are also inaccessible, such as https://designable-antd.formilyjs.org/

For details, please see this issue below： https://github.com/alibaba/formily/issues/4248

[Astralzz]

I have the same problem 😑