How to set React version to react@17 when i use npx create-react-app ? #12269

liuzhaowei55 · 2022-04-10T11:21:23Z

I create a cra templte, but it does not work with react@18 yet, how to set the defautl react version to react@17?

JitenderKumar2001 · 2022-04-11T13:04:52Z

You can set dependencies > "react-dom": "^18.0.0" to "react-dom": "^17.0.0" or you can reinstall react with @17 version.

liuzhaowei55 · 2022-04-11T13:19:35Z

You can set dependencies > "react-dom": "^18.0.0" to "react-dom": "^17.0.0" or you can reinstall react with @17 version.

I created a cra templte, and used mobx, mobx can not work with react@18 yet, when I use npx create-react-app --template aio, got an error like this:

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^17.0.2" from the root project
npm ERR!     peer react-dom@"^17.0.0 || ^18.0.0" from @mui/[email protected]
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.4.4" from the root project
npm ERR!     1 more (@testing-library/react)
npm ERR!   peer react@">= 16" from [email protected]
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.0" from the root project
npm ERR!     peer react-scripts@"^5.0.0" from @craco/[email protected]
npm ERR!     node_modules/@craco/craco
npm ERR!       @craco/craco@"^7.0.0-alpha.3" from the root project
npm ERR!   6 more (the root project, @emotion/react, @emotion/styled, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! mobx-react-lite@"^3.3.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17" from [email protected]
npm ERR!   node_modules/mobx-react-lite
npm ERR!     mobx-react-lite@"^3.3.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 /Users/where/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/where/.npm/_logs/2022-04-11T13_08_13_767Z-debug-0.log

so I need to lock the react with @17.

Good news is I got a solution, add resolutions to the templage.json > package, and use yarn create react-app --template aio instead npx xxx

raymondKelly · 2022-04-11T23:32:26Z

For some additional context on what I see

npm ERR! Could not resolve dependency:
npm ERR! peer react@"<18.0.0" from @testing-library/[email protected]

AkifumiSato · 2022-04-11T23:55:01Z

Similar results were obtained with npx create-react-app xxx.
Is this planned to be fixed in the next release?

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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/[email protected]
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 /Users/<user-name>/.npm/eresolve-report.txt for a full report.

arobbins · 2022-04-12T00:32:01Z

Getting the same error

camilosegura · 2022-04-12T00:37:06Z

Looks like this is the issue testing-library/react-testing-library#1041

xchen0326 · 2022-04-12T00:42:44Z

Getting the exactly same error as AkifumiSato.

jooonathann · 2022-04-12T00:49:27Z

It seems that web-vitals is causing an error on create-react-app.

Anyway, what i did to resolve the issue for now is :
1_delete both node_modules and package-lock.json
2_run "npm i web-vitals --save-dev"
3_run "npm install"
and then you can use "npm run build" and "npm start" again

jooonathann · 2022-04-12T00:56:56Z

forgot to mention, you can change to react 17 by deleting node_modules and package-lock.json, then on package.json change "react": "^18.0.0" and "react-dom": "^18.0.0" to "react": "^17.0.2" and "react-dom": "^17.0.2" or the version that you want, then run "npm install"

xchen0326 · 2022-04-12T00:58:09Z

Yes, manually changing the "react" and "react-dom" version and then npm install works for me. Thanks.

eps1lon · 2022-04-12T05:40:29Z

Testing Library React 12.x only works with React < 18
Testing Library React 13.x only works with React 18

Make sure that these versions match.

If there are still issues then please provide a minimal, cloneable repository that I can check out.

jplwood · 2022-04-13T17:31:43Z

This issue exists more broadly for any dependencies that are not yet ready to use React 18. (I'm having this issue because we have an internal library that isn't able to work with v18 yet) -- From what I can see, there is no way to use an old version of create-react-app anymore because it disallows use of global CRA with npx. We can't specify preferred CRA version, can't specify preferred react version without manually changing things after generating the app. Why is it so locked down? Am I missing something?

arikadiusz · 2022-05-18T14:59:09Z

Having the same issue. Unable to downgrade from v18 to v17 due to dependency errors.

fredbanda · 2022-05-26T10:08:22Z

You dont need to delete node modules really. just change the version of react on your packagejson to the version you want and run npm i . This will upgrade or downgrade your version based on what you put on your packagejson

fredbanda · 2022-05-26T10:09:46Z

This issue exists more broadly for any dependencies that are not yet ready to use React 18. (I'm having this issue because we have an internal library that isn't able to work with v18 yet) -- From what I can see, there is no way to use an old version of create-react-app anymore because it disallows use of global CRA with npx. We can't specify preferred CRA version, can't specify preferred react version without manually changing things after generating the app. Why is it so locked down? Am I missing something?

You can still use old version but install the new version and then downgrade

vvickedvveb · 2022-06-13T16:00:56Z

Install

npx create-react-app my_app --template typescript

`package.json`,

Replace versions with following...

"dependencies": {
...
  "@types/react": "^17.0.39",
  "@types/react-dom": "^17.0.11",
...
  "react": "^17.0.2",
  "react-dom": "^17.0.2",

Save

Then at command line...

  npm install

src/`index.tsx`

Change to following...

import ReactDOM from 'react-dom';
...
ReactDOM.render(
    <App />,
  document.getElementById('root')
);

Your node version should not necessarily matter

You're good to go!

@types versions:
@types/react
@types/react-dom

https://gist.github.com/vvickedvveb/0699c96ea03df7dd55290860722ca800

NishargShah · 2022-06-19T12:51:17Z

Check this, its working

https://stackoverflow.com/a/71908461/8798220

prprabhu-ms · 2022-06-24T15:54:07Z

FTR, The comment above is a good manual workaround. There are a few more libraries you might want to downgrade in your CRA initialized app.

npm install react@17 react-dom@17 @testing-library/react@12 @types/react@17 @types/react-dom@17

But the OP was asking a question about setting alternative React versions when authoring a CRA template. Turns out this is possible by simply including the React dependencies in the template's package.json. By default, CRA will install the latest React libraries, but if the template specifies the React dependencies explicitly those will override the defaults. For example, Fluent UI's CRA template uses this pattern.

basickarl · 2022-09-22T14:17:05Z

Why isn't this fixed in a simple manner? Should be some sort of npx create-react-app@17 my-app or something...

3142518077 · 2022-10-06T13:06:38Z

为什么不以简单的方式解决这个问题？应该是某种npx create-react-app@17 my-app东西……

i can

paulojeronimo · 2023-05-13T09:43:14Z

npx create-react-app@17 my-app

I tried running the following command. But, the answer to it was informed in the output of the command which, in turn, did not create the application.

$ npx [email protected] my-app

You are running `create-react-app` 4.0.1, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

yukecs · 2023-10-23T03:47:46Z

+1

BraianS · 2024-01-28T19:35:38Z

What worked for me is.

Install

npx create-react-app my_app_17 --template typescript

change these @testing dependencies to the version below

"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",

and react to version

"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",

Save. Delete package-lock.json if is created and install npm i

change index.tsx from folder app/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

run npm start

webpack compiled successfully
No issues found.

liuzhaowei55 added the needs triage label Apr 10, 2022

DaeguDude mentioned this issue Apr 12, 2022

fix: Only supports React < 18 testing-library/react-testing-library#1041

Merged

4 tasks

prprabhu-ms mentioned this issue Jun 17, 2022

Support React 18 Azure/communication-ui-library#1900

Closed

souhailmerroun mentioned this issue Jul 30, 2022

Not working with React 18 AgoraIO-Community/Agora-RTM-React#2

Closed

tay1orjones mentioned this issue Dec 6, 2022

React 18 Migration: The Umbrella carbon-design-system/carbon#11308

Closed

ilfa mentioned this issue Jan 23, 2023

React Can't resolve 'react/jsx-runtime' fingerprintjs/fingerprintjs-pro-react#90

Closed

tay1orjones mentioned this issue Apr 18, 2023

React 18 Enhancements carbon-design-system/carbon#13623

Closed

dmitri-minkin mentioned this issue Apr 21, 2023

Following instructions in .github/contributing.md fails when using the latest React 18 ava/use-http#388

Open

HimanshuGupta-p1 mentioned this issue Aug 28, 2023

React 18? as-ideas/add-to-homescreen-react#54

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to set React version to react@17 when i use npx create-react-app ? #12269

How to set React version to react@17 when i use npx create-react-app ? #12269

liuzhaowei55 commented Apr 10, 2022

JitenderKumar2001 commented Apr 11, 2022

liuzhaowei55 commented Apr 11, 2022

raymondKelly commented Apr 11, 2022

AkifumiSato commented Apr 11, 2022

arobbins commented Apr 12, 2022

camilosegura commented Apr 12, 2022

xchen0326 commented Apr 12, 2022 •

edited

Loading

jooonathann commented Apr 12, 2022

jooonathann commented Apr 12, 2022

xchen0326 commented Apr 12, 2022

eps1lon commented Apr 12, 2022

jplwood commented Apr 13, 2022 •

edited

Loading

arikadiusz commented May 18, 2022 •

edited

Loading

fredbanda commented May 26, 2022

fredbanda commented May 26, 2022

vvickedvveb commented Jun 13, 2022 •

edited

Loading

NishargShah commented Jun 19, 2022 •

edited

Loading

prprabhu-ms commented Jun 24, 2022

basickarl commented Sep 22, 2022

3142518077 commented Oct 6, 2022

paulojeronimo commented May 13, 2023

yukecs commented Oct 23, 2023

BraianS commented Jan 28, 2024

How to set React version to react@17 when i use npx create-react-app ? #12269

How to set React version to react@17 when i use npx create-react-app ? #12269

Comments

liuzhaowei55 commented Apr 10, 2022

JitenderKumar2001 commented Apr 11, 2022

liuzhaowei55 commented Apr 11, 2022

raymondKelly commented Apr 11, 2022

AkifumiSato commented Apr 11, 2022

arobbins commented Apr 12, 2022

camilosegura commented Apr 12, 2022

xchen0326 commented Apr 12, 2022 • edited Loading

jooonathann commented Apr 12, 2022

jooonathann commented Apr 12, 2022

xchen0326 commented Apr 12, 2022

eps1lon commented Apr 12, 2022

jplwood commented Apr 13, 2022 • edited Loading

arikadiusz commented May 18, 2022 • edited Loading

fredbanda commented May 26, 2022

fredbanda commented May 26, 2022

vvickedvveb commented Jun 13, 2022 • edited Loading

Install

package.json,

src/index.tsx

You're good to go!

NishargShah commented Jun 19, 2022 • edited Loading

prprabhu-ms commented Jun 24, 2022

basickarl commented Sep 22, 2022

3142518077 commented Oct 6, 2022

paulojeronimo commented May 13, 2023

yukecs commented Oct 23, 2023

BraianS commented Jan 28, 2024

Install

change these @testing dependencies to the version below

and react to version

change index.tsx from folder app/index.tsx

xchen0326 commented Apr 12, 2022 •

edited

Loading

jplwood commented Apr 13, 2022 •

edited

Loading

arikadiusz commented May 18, 2022 •

edited

Loading

vvickedvveb commented Jun 13, 2022 •

edited

Loading

`package.json`,

src/`index.tsx`

NishargShah commented Jun 19, 2022 •

edited

Loading