Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stas-litv opened this issue Apr 12, 2022 · 31 comments

Comments

@stas-litv
Copy link

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
Copy link

wsy commented Apr 12, 2022

I came across this problem, too!

@wsy
Copy link

wsy commented Apr 12, 2022

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

@stas-litv
Copy link
Author

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
Copy link

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

@stas-litv
Copy link
Author

stas-litv commented Apr 12, 2022

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.

@stas-litv stas-litv reopened this Apr 12, 2022
@DailyDisco
Copy link

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

@stas-litv
Copy link
Author

stas-litv commented Apr 12, 2022

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
Copy link

I'm also experiencing this issue.

@alaninnovates
Copy link

This is happening to me too.

@moaazassali
Copy link

Same issue here

@wsy
Copy link

wsy commented Apr 12, 2022

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

@stas-litv
Copy link
Author

stas-litv commented Apr 12, 2022

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
Copy link

dougmellon commented Apr 12, 2022

Currently experiencing the same issue.

MacOS 12.3.1

@ccrsxx
Copy link

ccrsxx commented Apr 12, 2022

is there a workaround for this?

@wsy
Copy link

wsy commented Apr 12, 2022

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
Copy link
Author

stas-litv commented Apr 12, 2022

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
Copy link

tararosenthal commented Apr 12, 2022

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
Copy link

dougmellon commented Apr 12, 2022

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
Copy link

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

@stas-litv
Copy link
Author

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
Copy link

@stas-litv I see - thank you!

@danielru15
Copy link

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
Copy link

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
Copy link

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
Copy link

mwskwong commented Apr 12, 2022

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
Copy link

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
Copy link

ghost commented Apr 12, 2022

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
Copy link

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
Copy link

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

@gannicus4431
Copy link

gannicus4431 commented Apr 12, 2022

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
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests