facebook/create-react-app

Error from using npx create-react-app

chaucute11 opened this issue · 13 comments

chaucute11 commented

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 commented

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

Step-henC commented

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 commented

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.

  • 👍14
  • 🎉3
  • ❤️9
halfnibble commented

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 commented

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 commented

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

Step-henC commented

This PR should fix the issue

Chris-N commented

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

  • 👀1
insidesecurity-yhojann-aguilera commented

Same problem when try create a new project or innstall dependencies or try run a existent project, react is all broken. I try use node 18 and 22 using n but does not work.

yhojann-cl commented

Care must be taken with agile CICD deployments as react projects may fail to compile and may cause downtime if errors are not handled properly in the pipeline or workflow.

petervn commented

i have same issue

yhojann-cl commented

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

HemanGhumwala commented

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?

This helped me. Thanks