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

[stas-litv]

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: [email protected]
Found: [email protected]
node_modules/react
react@"^18.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@"^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
}

[wsy]

I came across this problem, too!

[wsy]

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

[stas-litv]

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

[DailyDisco]

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

[stas-litv]

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.

[DailyDisco]

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

[stas-litv]

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

[LagunaElectric]

I'm also experiencing this issue.

[alaninnovates]

This is happening to me too.

[moaazassali]

Same issue here

[wsy]

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

[stas-litv]

The problem has appeared just 6-7 hours ago when version 12.1.5 of @testing-library/react was released
Before it was totally ok because previous versions didn't require any specific version of React, now it wants version <18.0.0

[dougmellon]

Currently experiencing the same issue.

MacOS 12.3.1

[ccrsxx]

is there a workaround for this?

[wsy]

OK. After digging, I found this: testing-library/react-testing-library PR#1041,

So here's the timeline:

• Months ago, CRA 5.0.0 is released with React 18 and RTL 12.x, everything works fine.
• Two weeks ago, RTL 13.x was released to support React 18. Everything still works fine.
• Three days ago, CRA merged a PR to upgrade RTL to 13.x and targeting Milestone 5.0.1.
• Some hours ago, RTL released 12.1.5 and limits 12.x to support only up to React 17. This breaks the dependency tree because 5.0.1 hasn't been released.

[stas-litv]

So, I found a temporary solution.

You can use Custom Template for creating React App with CRA instead of default cra-template package (https://www.npmjs.com/package/cra-template). Using of Custom Templates is well described in https://create-react-app.dev/docs/custom-templates/

All you want for this solution is to change version or RTL (React Testing Library) in the template.json file of your custom template to ^13.0.0 so it supports React v18

Step-by-step:

• In your root folder create separate folder for your custom template
• Go to the new folder and install locally cra-template package by running npm install cra-template
• After install is finished, open the file template.json and change the line "@testing-library/react": "^12.0.0" to "@testing-library/react": "^13.0.0"
• Go back to your root folder and run npx create-react-app YOUR_APP_NAME --template file:PATH_TO_YOUR_CUSTOM_TEMPLATE

It worked well for me
You can save your custom template and reuse it later until the new version 5.0.1 of CRA is published

EDIT: fixed a typo "cra-install" to "cra-template" Thanks!

[tararosenthal]

Thanks for the solution! Just a note, that there is a typo in case anyone is confused. It should be "npm install cra-template"

[dougmellon]

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.

[viteshbava]

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

[stas-litv]

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.

[viteshbava]

@stas-litv I see - thank you!

[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:

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

[gannicus4431]

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.

[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(

)

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

[mwskwong]

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.

[JayceDugan]

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.

[ghost]

I also have this issue. Has it officially been fixed yet or do I need to use the workaround solution for now? What are the pros and cons, should I wait for the official fix?

[ottokruse]

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

[mustafabin]

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

[gannicus4431]

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

[welschmoor]

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!