Error with npx create-react-app my-app

[ateregulov]

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.

0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js 1 info using [email protected] 2 info using [email protected] 3 silly config load:file:C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\npmrc 4 silly config load:file:C:\Users\Artur\Documents\Reps\oris-app\my-app2.npmrc 5 silly config load:file:C:\Users\Artur.npmrc 6 silly config load:file:C:\Users\Artur\AppData\Roaming\npm\etc\npmrc 7 verbose title npm install @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 8 verbose argv "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" 9 verbose logfile logs-max:10 dir:C:\Users\Artur\AppData\Local\npm-cache_logs\2025-01-10T13_45_12_400Z- 10 verbose logfile C:\Users\Artur\AppData\Local\npm-cache_logs\2025-01-10T13_45_12_400Z-debug-0.log 11 silly logfile start cleaning logs, removing 1 files 12 silly packumentCache heap:4345298944 maxSize:1086324736 maxEntrySize:543162368 13 silly logfile done cleaning log files 14 silly idealTree buildDeps 15 silly fetch manifest @testing-library/jest-dom@^5.14.1 16 silly packumentCache full:https://registry.npmjs.org/@testing-library%2fjest-dom cache-miss 17 http fetch GET 200 https://registry.npmjs.org/@testing-library%2fjest-dom 1493ms (cache updated) 18 silly packumentCache full:https://registry.npmjs.org/@testing-library%2fjest-dom set size:undefined disposed:false 19 silly fetch manifest @testing-library/react@^13.0.0 20 silly packumentCache full:https://registry.npmjs.org/@testing-library%2freact cache-miss 21 http fetch GET 200 https://registry.npmjs.org/@testing-library%2freact 313ms (cache updated) 22 silly packumentCache full:https://registry.npmjs.org/@testing-library%2freact set size:undefined disposed:false 23 silly fetch manifest react@^19.0.0 24 silly packumentCache full:https://registry.npmjs.org/react cache-miss 25 http cache https://registry.npmjs.org/react 28ms (cache hit) 26 silly packumentCache full:https://registry.npmjs.org/react set size:5325544 disposed:false 27 silly fetch manifest react@^18.0.0 28 silly packumentCache full:https://registry.npmjs.org/react cache-miss 29 http cache https://registry.npmjs.org/react 44ms (cache hit) 30 silly packumentCache full:https://registry.npmjs.org/react set size:5325544 disposed:false 31 verbose stack Error: unable to resolve dependency tree 31 verbose stack at #failPeerConflict (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:1363:25) 31 verbose stack at #loadPeerSet (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:1329:33) 31 verbose stack at async #buildDepStep (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:904:11) 31 verbose stack at async Arborist.buildIdealTree (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:181:7) 31 verbose stack at async Promise.all (index 1) 31 verbose stack at async Arborist.reify (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\reify.js:131:5) 31 verbose stack at async Install.exec (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\lib\commands\install.js:150:5) 31 verbose stack at async Npm.exec (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\lib\npm.js:207:9) 31 verbose stack at async module.exports (C:\Users\Artur\AppData\Roaming\npm\node_modules\npm\lib\cli\entry.js:69:5) 32 error code ERESOLVE 33 error ERESOLVE unable to resolve dependency tree 34 error 35 error While resolving: [email protected] 35 error Found: [email protected][2m[22m 35 error [2mnode_modules/react[22m 35 error react@"^19.0.0" from the root project 35 error 35 error Could not resolve dependency: 35 error [95mpeer[39m react@"^18.0.0" from @testing-library/[email protected][2m[22m 35 error [2mnode_modules/@testing-library/react[22m 35 error @testing-library/react@"^13.0.0" from the root project 35 error 35 error Fix the upstream dependency conflict, or retry 35 error this command with --force or --legacy-peer-deps 35 error to accept an incorrect (and potentially broken) dependency resolution. 36 error 36 error 36 error For a full report see: 36 error C:\Users\Artur\AppData\Local\npm-cache_logs\2025-01-10T13_45_12_400Z-eresolve-report.txt 37 silly unfinished npm timer reify 1736516713269 38 silly unfinished npm timer reify:loadTrees 1736516713270 39 silly unfinished npm timer idealTree:buildDeps 1736516714252 40 silly unfinished npm timer idealTree:#root 1736516714253 41 verbose cwd C:\Users\Artur\Documents\Reps\oris-app\my-app2 42 verbose os Windows_NT 10.0.26100 43 verbose node v22.13.0 44 verbose npm v11.0.0 45 verbose exit 1 46 verbose code 1 47 error A complete log of this run can be found in: C:\Users\Artur\AppData\Local\npm-cache_logs\2025-01-10T13_45_12_400Z-debug-0.log

npm resolution error report

While resolving: [email protected] Found: [email protected] node_modules/react react@"^19.0.0" from the root project

Could not resolve dependency: peer react@"^18.0.0" from @testing-library/[email protected] node_modules/@testing-library/react @testing-library/react@"^13.0.0" from the root project

Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.

[javafuns]

I got the same error :-(

[pro2on]

I have the same error

[Kivylius]

same here, what going on?

node: v20.11.0 npm: 10.2.4 win11

[visionscaper]

Same here.

node: v23.6.0 npm: 11.0.0 MacOS 15.2 (24C101)

[pmharris77]

I get the same error, but seems to only be an issue when creating the app with the npm npx create-react-app my-app command. If you install yarn and use that instead, it seems to work for me:

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

node: 20.16.0 npm: 9.2.0 yarn: 1.22.22 Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)

[harrydehix]

Same error here. Clearing the cache or using create-react-app@latest did not help. I updated npm to the latest version (11.0.0) and I'm using the current node LTS version (v22.13.0).

[pmharris77]

Been doing some research and technically, create-react-app is deprecated and no longer maintained, despite still being referenced by many online tutorials, so I doubt there will be a fix for this... A better alternative would be next.js or vite, which are more modern and lightweight.

With vite you can get going simply with:

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

See https://vite.dev/guide/ for more info.

[rayonnunes]

I've managed to make CRA back to work by doing some workarounds:

Source code

1. Use node 18 (nvm recommended):

nvm install 18

2. Downgrade react from ^19.0.0 to ^18.3.1 and react-scripts from 5.0.1 to 4.0.3 in package.json

- "react": "^19.0.0",
- "react-dom": "^19.0.0",
- " react-scripts": "5.0.1",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ " react-scripts": "4.0.3",

3. Remove node_modules and package-lock.json then run npm i

4. Upgrade react-scripts back to 5.0.1 and run npm i (do not remove node_modules or package-lock.json this time)

5. Install community types

npm i --save-dev @types/react @types/react-dom @types/jest 

6. remove src/reportWebVitals.ts file and its reference

7. Optional for typescript: add the following tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}

8. Optional for testing:

npm install --save-dev ts-jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom 
npx ts-jest config:init

8.1 Update your jest.config.js

- testEnvironment: "node"
+ testEnvironment: "jest-environment-jsdom"
+ moduleNameMapper: {
+     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+       "<rootDir>/tests/__mocks__/fileMock.ts",
+     "\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.ts",
+   },
+   setupFilesAfterEnv: ["<rootDir>/tests/setupJest.ts"],

8.2 Create a new folder tests at the root and a new file setupJest.ts:

import "@testing-library/jest-dom";

8.3 Under tests create a new folder __mocks__ and two files: fileMock.ts - for media files

export default "test-file-stub";

styleMock.ts

export default {};

I've created a new react app using CRA only for educational purposes, I truly recommend everyone to deprecate this method of in favor of vite template or Next.js

[boldandbusted]

Been doing some research and technically, create-react-app is deprecated and no longer maintained, despite still being referenced by many online tutorials, so I doubt there will be a fix for this... A better alternative would be next.js or vite, which are more modern and lightweight.

With vite you can get going simply with:

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

See https://vite.dev/guide/ for more info.

Hey there. Can you share a link to an announcement of the deprecation of create-react-app? Indeed it is still core to this tutorial: https://www.w3schools.com/REACT/default.asp . Cheers.

[GorlikItsMe]

Solution: Dont use create-react-app unsupported garbage.

Do this:

bun create vite my-react-app --template react-ts
cd my-react-app
bun install
bun run dev

[ori1202]

Solution: Dont use create-react-app unsupported garbage.

Do this:

bun create vite my-react-app --template react-ts
cd my-react-app
bun install
bun run dev

As the last person mentioned, React is known to be unstable, and it encourages you to use tools exclusively within its ecosystem (e.g., Vite). In fact, if you visit their official website here, they no longer mention the script npx create-react-app my-app. Instead, they recommend using frameworks like Next.js or Remix over vanilla React. Lastly, you can also use Parcel to work with vanilla React without the bloated node_modules that typically come with React projects. See more details here.