Issue while trying to create new project

[elementkz]

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^18.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"<18.0.0" from @testing-library/[email protected] npm ERR! node_modules/@testing-library/react npm ERR! @testing-library/react@"^12.0.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\adamr\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\adamr\AppData\Local\npm-cache_logs\2022-04-12T04_05_01_315Z-debug-0.log npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^12.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

[elementkz]

that's the first time I try to use react so I don't know what any of those errors means

[dougmellon]

https://github.com/facebook/create-react-app/issues/12278

[danielru15]

hola , en un grupo de facebook un usuario me compartio esta solucion: abran el proyecto en visual studio y en el index.js remplazarlo por esto:

importar React desde 'react'; import { createRoot } desde 'react-dom/client'; importar './index.css'; importar la aplicación desde './App'; const container = document.getElementById('root'); const root = createRoot(contenedor); root.render( <React.StrictMode>

</React.StrictMode>,

);

luego puedes ejecutar npm start sin problemas

[dhruv-panchal211]

I found the solution.

create-react-app is not updating index.js as per the new react V18

so you need to modify index.js file as follow

import React from 'react'; import {createRoot} from 'react-dom/client'; import './index.css'; import App from './App'; // import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root'); const root = createRoot(container)

root.render( <React.StrictMode> <App /> </React.StrictMode>, )

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // reportWebVitals();

[michaelti]

The ERESOLVE error specifically seems to have been caused by react-testing-library's 12.1.5 release yesterday, which doesn't support React 18.

It looks like there is a PR already to fix this

[morenoisidro]

This should be solved after the recent v5.0.1 release. Try running npx create-react-app again.

[arpitghura]

I have also encountered with this error yesterday but today the

npx create-react-app my-app

is not working fine but it now ask to install create-react-app package.

[PrabhaShankar-23]

This worked out in my case. Beforew creating the app first run this:

npm config set legacy-peer-deps true

Then run:

npx create-react-app my-app

Explanation: The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.

[wulinjie122]

This worked out in my case. Beforew creating the app first run this:

npm config set legacy-peer-deps true

Then run:

npx create-react-app my-app

Explanation: The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.

Helps me a lot.

[Otien0]

This worked out in my case. Beforew creating the app first run this: npm config set legacy-peer-deps true Then run: npx create-react-app my-app Explanation: The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.

Helps me a lot.

This is the answer I was looking for.

[michaelti]

As far as I understand, the original issue posted by @elementkz was fixed in create-react-app 5.0.1 (release)

This can probably be closed.

[Que0Le]

Temporary fix:

npm config set legacy-peer-deps true

... before call create-react-app. And in App.tsx file there is a Box got imported twice.

[YuvrajSinghJadon]

This worked out in my case. Beforew creating the app first run this:

npm config set legacy-peer-deps true

Then run:

npx create-react-app my-app

Explanation: The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.

This worked for me thanks

[dawit-melka]

I also faced the same issue and I simply solved it by reinstalling the latest version of node.

[elementkz]

I also faced the same issue and I simply solved it by reinstalling the latest version of node.

Hi, I posted it in april last year. It was a new update that came out the same day, it was fixed I think, and should be closed, sorry for forgetting