[React 19] Error when use create-react-app

[manueljesus00]

Summary

When you try to run the command 'npx create-react-app .' and proceed to install the dependencies with npm it returns an error code ERESOLVE Unable to resolve dependency tree as it generates the package.json with React version 19 but @testing-library/[email protected] is compatible exclusively with React 18.

Screenshots

[chiragjha1]

The current version of create-react-app generates a package.json file with React 19, which causes a dependency conflict since @testing-library/[email protected] only supports React 18.

Use the following command to make sure React 18 and is installed:

npx create-react-app my-app --template cra-template
cd my-app
npm install react@18 react-dom@18 react-scripts

or you can manually adjust the package.json file as:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@testing-library/react": "^13.4.0",
"react-scripts": "5.0.1"
}

[thatdudeaccount]

The issue occurs because the npx create-react-app command is generating a package.json file that uses React version 19, while @testing-library/[email protected] explicitly supports only React 18. This version mismatch creates a dependency conflict, resulting in the ERESOLVE Unable to resolve dependency tree error.

solution:

1. You can bypass the dependency conflict by running the installation with the --legacy-peer-deps flag, which ignores peer dependency issues.

npx create-react-app .
npm install --legacy-peer-deps

ps: this is only temporary fix and not ideal for long-term stability

2. Downgrade React to version 18

open package.json and change the React version
"react": "^18.2.0",
"react-dom": "^18.2.0"

reinstall dependencies

3. use vite instead of CRA:
   Since CRA(Create React App) has become somewhat outdated consider switching to Vite, which is faster, more modern, and better aligned with current React versions.

bash:
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

[Prachi-kushwaha]

what if we use typescript

[Prachi-kushwaha]

PS D:\react-type> npx create-react-app my-app-react --template typescript --use-npm --legacy-peer-deps

Creating a new React app in D:\react-type\my-app-react.

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

added 1323 packages in 3m

267 packages are looking for funding
run npm fund for details

Initialized a git repository.

Installing template dependencies using npm...
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
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\prach\AppData\Local\npm-cache_logs\2025-01-12T20_19_21_439Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\prach\AppData\Local\npm-cache_logs\2025-01-12T20_19_21_439Z-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 @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 failed

.........but again i got same error

[thatdudeaccount]

that's because you are using CRA again....

try this code:
npm create vite@latest my-app

then you will be aksed to chose the framework and variant....chose react (or any other framework that you like) and select TypeScript as a variant after choosing the framework

[venkateshbpiq]

The issue occurs because the npx create-react-app command is generating a package.json file that uses React version 19, while @testing-library/[email protected] explicitly supports only React 18. This version mismatch creates a dependency conflict, resulting in the ERESOLVE Unable to resolve dependency tree error.

solution:

1. You can bypass the dependency conflict by running the installation with the --legacy-peer-deps flag, which ignores peer dependency issues.

npx create-react-app . npm install --legacy-peer-deps

ps: this is only temporary fix and not ideal for long-term stability

2. Downgrade React to version 18

open package.json and change the React version "react": "^18.2.0", "react-dom": "^18.2.0"

reinstall dependencies

3. use vite instead of CRA:
   Since CRA(Create React App) has become somewhat outdated consider switching to Vite, which is faster, more modern, and better aligned with current React versions.

bash: npm create vite@latest my-app --template react cd my-app npm install npm run dev

For react: chiragjha1 You may need to install: npm install web-vitals after downgrading to React 18

[Gourav2580]

please assign this issue i want to work

[mbilawalzaman]

PS D:\react-type> npx create-react-app my-app-react --template typescript --use-npm --legacy-peer-deps

Creating a new React app in D:\react-type\my-app-react.

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

added 1323 packages in 3m

267 packages are looking for funding run npm fund for details

Initialized a git repository.

Installing template dependencies using npm... 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 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\prach\AppData\Local\npm-cache_logs\2025-01-12T20_19_21_439Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\prach\AppData\Local\npm-cache_logs\2025-01-12T20_19_21_439Z-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 @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 failed

.........but again i got same error

The cleanest solution is to downgrade to React 18 since the @testing-library/react version you're using (13.4.0) only supports React 18. Alternatively, you can try using --force or --legacy-peer-deps to bypass the conflict, but these might lead to compatibility issues later. If you're set on using React 19, be prepared to face potential issues with dependencies that are not yet compatible.

[peacedever]

No matter which method mentioned above is used, an error will eventually occur. (Except using Vite, of course)

Right now,create-react-app needs to be downgraded to use react 18.

[vipinAlways]

Summary

When you try to run the command 'npx create-react-app .' and proceed to install the dependencies with npm it returns an error code ERESOLVE Unable to resolve dependency tree as it generates the package.json with React version 19 but @testing-library/[email protected] is compatible exclusively with React 18.

Screenshots

i will use vite which will give you the smooth experience