With a new version 12.1.5 of "@testing-library/react" running "npx create-react-app" fails with an ERESOLVE issue

Describe the bug

If you run "npx create-react-app Project-Name" after version 12.1.5 of @testing-library/react was released if will fail because current "cra-template" has "@testing-library/react": "^12.0.0" in its dependencies template for a new project. Version 12.1.5 of @testing-library/react requires "react": "<18.0.0" in its peer dependencies. That creates a conflict of dependencies.

Error report:

While resolving: test2@0.1.0
Found: react@18.0.0
node_modules/react
react@"^18.0.0" from the root project

Could not resolve dependency:
peer react@"<18.0.0" from @testing-library/react@12.1.5
node_modules/@testing-library/react
@testing-library/react@"^12.0.0" from the root project

Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "18.0.0",
"whileInstalling": {
"name": "test2",
"version": "0.1.0",
"path": """
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "^18.0.0",
"from": {
"location": """
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "^18.0.0",
"from": {
"location": """
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "<18.0.0",
"error": "INVALID",
"from": {
"name": "@testing-library/react",
"version": "12.1.5",
"whileInstalling": {
"name": "test2",
"version": "0.1.0",
"path": """
},
"location": "node_modules/@testing-library/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "@testing-library/react",
"spec": "^12.0.0",
"from": {
"location": "*********************************"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}

I came across this problem, too!

@stas-litv

Why you closed this? @stas-litv Did you solve this problem?

Closed the issue because the problem was in npm cache of my computer.
The dependencies list was already updated three days ago and now it contains ^13.0.0 of @testing-library/react

How did you fix the issue? I have the same problem. Thanks in advance.

Sorry, didn't check everything. The problem is still active for me. I'm reopening it.
It will be fixed in version 5.0.1 (pull request is already approved), but at this moment it doesn't work.

Ah okay, so we just need to wait for an update?

Ah okay, so we just need to wait for an update?

Looks like we need to wait, I don't know for sure. That's why I reopened the issue.
I'm waiting for someone to comment it.

Pull request that fixes it: #12223

I'm also experiencing this issue.

This is happening to me too.

Same issue here

CRA 5.0.0 was released many months ago. I wonder why they did not notice this many months ago?

Temporary workaround:

npx create-react-app my-app (let the build fail)
Delete the node_modules directory
Delete the package-json.lock file
Open package.json and change it to the following:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Delete reportWebVitals.js
Remove import reportWebVitals from './reportWebVitals'; from index.js
Remove reportWebVitals(); from the bottom of index.js

Re-install with npm install.

@stas-litv

@stas-litv is this closed because it has been resolved?

It will be resolved in the next version on CRA, there's already accepted pull request for it (mentioned before).
I closed an issue because I can't see a way to solve this issue permanently until the new version is published.
Temporary solutions are here for anybody to use.

@stas-litv

@stas-litv I see - thank you!

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:

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>

</React.StrictMode>,

);

luego puedes ejecutar npm start sin problemas

Temporary workaround:

npx create-react-app my-app (let the build fail) Delete the node_modules directory Delete the package-json.lock file Open package.json and change it to the following:
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Delete reportWebVitals.js Remove import reportWebVitals from './reportWebVitals'; from index.js Remove reportWebVitals(); from the bottom of index.js

Re-install with npm install.

Hi, may i know what do you re-install with npm install? Thank you so much.

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(

)

// 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();

Workaround
Create a project using npm init instead

npm init react-app <your_project_name> --legacy-peer-deps

Edit
Just in case people are hesitant to do so, it is a documented way to bootstrap CRA projects. THe only thing added is --legacy-peer-deps.

@mwskwong

npm init react-app <your_project_name> --legacy-peer-deps

+1 for @mwskwong here, worked well.

Also in case anyone's just looking to get a project running in the interim, yarn create react-app my-app is still working without --legacy-peer-deps.

Another work around, that allows me to go ahead with React 18 and the TypeScript CRA template:

export NPM_CONFIG_LEGACY_PEER_DEPS=true
npx create-react-app webapp --template typescript

running npm i web-vitals --save-dev worked for me

Using npm init as suggested by mwskwong.

From my understanding they pretty much do the same thing except version control.

Compare npx and npm:
https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm

Thank you for fixing the issue. I thought something was with my computer, so I tried on Windows, Linux and Mac all with the same issue. Today everything worked great. Thank you for your work. A deep bow from me!

Navigation Menu

Repository navigation

With a new version 12.1.5 of "@testing-library/react" running "npx create-react-app" fails with an ERESOLVE issue #12278

Describe the bug

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

With a new version 12.1.5 of "@testing-library/react" running "npx create-react-app" fails with an ERESOLVE issue #12278

Description

Describe the bug

Activity

wsy commented on Apr 12, 2022

wsy commented on Apr 12, 2022

stas-litv commented on Apr 12, 2022

DailyDisco commented on Apr 12, 2022

stas-litv commented on Apr 12, 2022

DailyDisco commented on Apr 12, 2022

stas-litv commented on Apr 12, 2022

LagunaElectric commented on Apr 12, 2022

alaninnovates commented on Apr 12, 2022

moaazassali commented on Apr 12, 2022

wsy commented on Apr 12, 2022

6 remaining items

dougmellon commented on Apr 12, 2022

viteshbava commented on Apr 12, 2022

stas-litv commented on Apr 12, 2022

viteshbava commented on Apr 12, 2022

danielru15 commented on Apr 12, 2022

gannicus4431 commented on Apr 12, 2022

dhruv-panchal211 commented on Apr 12, 2022

mwskwong commented on Apr 12, 2022

JayceDugan commented on Apr 12, 2022

ottokruse commented on Apr 12, 2022

mustafabin commented on Apr 12, 2022

gannicus4431 commented on Apr 12, 2022

welschmoor commented on Apr 17, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions