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

Question

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

stas-litv opened this issue 4 years ago · 31 comments

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
}

Answer 1 · 2022-04-12T01:43:28.000Z

I came across this problem, too!

Answer 2 · 2022-04-12T01:44:38.000Z

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

Answer 3 · 2022-04-12T01:46:34.000Z

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

Answer 4 · 2022-04-12T01:57:33.000Z

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

Answer 5 · 2022-04-12T01:59:21.000Z

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.

Answer 6 · 2022-04-12T02:00:11.000Z

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

Answer 7 · 2022-04-12T02:01:37.000Z

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

Answer 8 · 2022-04-12T02:12:31.000Z

I'm also experiencing this issue.

Answer 9 · 2022-04-12T02:22:25.000Z

This is happening to me too.

Answer 10 · 2022-04-12T02:25:57.000Z

Same issue here

Answer 11 · 2022-04-12T02:29:01.000Z

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

Answer 12 · 2022-04-12T02:31:01.000Z

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

Answer 13 · 2022-04-12T02:33:02.000Z

Currently experiencing the same issue.

MacOS 12.3.1

Answer 14 · 2022-04-12T02:37:30.000Z

is there a workaround for this?

Answer 15 · 2022-04-12T02:43:37.000Z

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.

Answer 16 · 2022-04-12T02:45:53.000Z

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!

Answer 17 · 2022-04-12T03:17:52.000Z

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

Answer 18 · 2022-04-12T03:35:25.000Z

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.

Answer 19 · 2022-04-12T05:38:53.000Z

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

Answer 20 · 2022-04-12T05:44:40.000Z

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.

Answer 21 · 2022-04-12T05:46:00.000Z

@stas-litv I see - thank you!

Answer 22 · 2022-04-12T07:16:35.000Z

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

Answer 23 · 2022-04-12T08:50:24.000Z

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.

Answer 24 · 2022-04-12T09:12:28.000Z

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

Answer 25 · 2022-04-12T09:48:33.000Z

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.

Answer 26 · 2022-04-12T09:57:27.000Z

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.

Answer 27 · 2022-04-12T11:38:28.000Z

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?

Answer 28 · 2022-04-12T13:37:56.000Z

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

Answer 29 · 2022-04-12T14:13:21.000Z

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

Answer 30 · 2022-04-12T14:20:16.000Z

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

Answer 31 · 2022-04-17T21:15:19.000Z

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!