probleme while launching npx create-react-app

[KamecheMohamedSofiane]

2 error code ERESOLVE
33 error ERESOLVE unable to resolve dependency tree
34 error
35 error While resolving: frontend@0.1.0
35 error Found: react@19.0.0
35 error node_modules/react
35 error react@"^19.0.0" from the root project
35 error
35 error Could not resolve dependency:
35 error peer react@"^18.0.0" from @testing-library/react@13.4.0
35 error node_modules/@testing-library/react
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:

[MichalRafalski]

A quick workaround:

1. First, try to create a new React project:

   npx create-react-app my-app

It will complain about React 19.

2. Navigate to your project folder and do the following:

   • Delete the node_modules folder.

   • Open package.json and replace the following lines:

     "react": "^19.0.0",
     "react-dom": "^19.0.0",

     with:

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

   • Run npm i

3. Install the required package:

   npm install --save-dev web-vitals

then npm start works

[vanilla-tiramisu]

Still I got these problems after entering npm start at parent directory:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:449:10)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:481:5  
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:342:12 
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
(node:21904) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:401:16)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:433:10 
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:308:13 
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\babel-loader\lib\index.js:51:103   
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Why did it happen? I've got no sense.

[FallingSnowFlake]

Still I got these problems after entering npm start at parent directory:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:449:10)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:481:5  
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:342:12 
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
(node:21904) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:401:16)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:433:10 
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\webpack\lib\NormalModule.js:308:13 
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Users\文档\temp\code\2025.01.27\milktea\milktea-frontend\node_modules\babel-loader\lib\index.js:51:103   
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Why did it happen? I've got no sense.

You can refre to this link: https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported/73465262#73465262

Hope you can help :D

[FallingSnowFlake]

2 error code ERESOLVE 33 error ERESOLVE unable to resolve dependency tree 34 error 35 error While resolving: frontend@0.1.0 35 error Found: react@19.0.0 35 error node_modules/react 35 error react@"^19.0.0" from the root project 35 error 35 error Could not resolve dependency: 35 error peer react@"^18.0.0" from @testing-library/react@13.4.0 35 error node_modules/@testing-library/react 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:

Your can:

1. cd your project.
2. npm uninstall react react-dom web-vitals
3. npm install react@18 react-dom@18
4. npm install web-vitals --save-dev

[GustavoKasaki]

I've had the same issue, what solved for me is to set 'legacy-peer-deps' as 'true', using the following:

npm config set legacy-peer-deps true

then:

npx create-react-app my-app

edit: downgrading react and react-dom to 18 worked as well.

[DogPawHat]

While updating the peer dependencies will work, the project has been unmaintained for 2 years and is now officially deprecated. (See #17004 for details)

My personal recommendations for new beginners:
https://react.dev/learn/start-a-new-react-project
https://nextjs.org/docs/app/getting-started/installation
https://vite.dev/guide/

[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