npx create-react-app

[JingqiGao-2]

Why after react19 was released npx create-react-app demo --template typescript typescript has dependency issues

[Greg-Myers-SB]

Confirmed.

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: calculator@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 /Users/gregory.myers/.npm/_logs/2024-12-06T11_49_25_590Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/gregory.myers/.npm/_logs/2024-12-06T11_49_25_590Z-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

[irvelervel]

Confirmed, we're already talking about it here -> #13715

[yhojann-cl]

Wrong repository, the problem is not for React Scripts, is Testing Library for React: testing-library/react-testing-library#1372

[saitejayelubolu]

This is for React and Typescript

Typescript React follows these steps:

npm install -g typescript

then

npm uninstall react react-dom

then

npm install react@18 react-dom@18

then

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

then

npx tsc --init

then

npx tsc --build --clean

then

npm install --save-dev typescript

then

open the tsconfig.json
replace code below

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2015"],
"allowJs": true,
"jsx": "react-jsx", // Add this line to enable JSX handling
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src"
]
}

then

goto src/App.tsx

comment 2nd line
// import logo from "./logo.svg";

comment 9th line
{/* logo */}

then

npm start

or you can go with this YouTube link: https://youtu.be/_0_kW0xI7P8?si=JWDu0Lyskflmdjol

[saitejayelubolu]

This is for React JS

the first step is to locate your project folder

then run these commands one by one

npm uninstall react react-dom

then

npm install react@18 react-dom@18

then

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

then

npm start

here what we are doing is uninstalling react19 and installing react18.

or you can go with this YouTube link: https://youtu.be/mUlfo5ptm1o?si=hYHTwc7hApEXzPX5

[Greg-Myers-SB]

This was fixed by #13738 and could now be closed.

Do you have a new issue @saitejayelubolu or did that fix not work?

[JingqiGao-2]

This was fixed by #13738 and could now be closed.

Do you have a new issue @saitejayelubolu or did that fix not work?

I'll have a try