Error from using npx create-react-app

[chaucute11]

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: bai-37@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\PC\AppData\Local\npm-cache_logs\2024-12-11T07_56_15_943Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\PC\AppData\Local\npm-cache_logs\2024-12-11T07_56_15_943Z-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

[Type1J]

This prevents use of create-react-app until it is fixed.

[Step-henC]

Looks like a peer dependency issue with react testing libray. The react testing library recently added support for react 19. Simply upgrading this package.json to latest testing library version 16.1.0 should work

[Dyurandaru]

what causes this problem is that the default versions of create-react-app are old versions that do not support the new react 19.

the simple solution to this error:

• after running npx create-react-app your-app (you will get an error).
• move to the project directory.
• and run npm install @testing-library/jest-dom@latest @testing-library/react@latest @testing-library/user-event@latest web-vitals@latest.
• then npm start.

this should fix the issue about testing-library dependencies and reportWebVitals from the index.js file.

however, if you don't use these packages testing-library and web-vitals

• after running npx create-react-app your-app (you will get an error).
• move to the project directory.
  if you run npm start you will get an error about ./reportWebVitals cant be resolved. (if you got an error about web vitals)
• to fix this issue you can safely remove the reportWebVitals.js file from the src directory and remove import reportWebVitals from './reportWebVitals'; and reportWebVitals(); code from the index.js file.
• then run npm start.

and this should work fine.

you have to do this everytime you created a project until they release v6.0.0 of create-react-app. if you dont want to do this every time and only with one command i suggest using custom template then update the dependencies version to a newer versions in package.json file directly.

i hope this is helpful.

[halfnibble]

Based on above instructions from @Dyurandaru, if you want react 18.

First remove the package lock file and node_modules

rm package-lock.json
rm -rf node_modules

Change the react deps from "^19.0.0" to "^18.0.0"

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

Then

npm install

Then

npm install --save web-vitals

Then

npm install --save-dev @testing-library/jest-dom @testing-library/react @testing-library/user-event

Request

Can we make it so that create-react-app optionally takes an ENV var with the desired version of React instead of always getting the latest?

[halfnibble]

And to support TypeScript, after doing this^

npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest

Then rename files from .jsx or .js to .tsx or .ts

I had to delete the reportWebVitals() call in index.tsx because it was not making TypeScript happy.

And finally, create a tsconfig.json file at the root with:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "types": [
      "react-scripts"
    ]
  },
  "include": [
    "src",
  ]
}

[ellvtr]

How can I use an older version of create-react-app as the current one is broken - as described in this issue

[Step-henC]

This PR should fix the issue

[Chris-N]

On this issue #13289 I read that the create-react-app is pretty much dead. It isn't even referenced in the official react docs as well. If you read though the comments at the linked issue you'll see the recommended method is to create a react app using https://vitejs.dev/ or converting your existing project to Vite