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: react-complete-guide@0.1.0
npm ERR! Found: react@18.0.0
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/react@12.1.5
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]

#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>

</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.

[mourice-oduor]

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