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

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

Apr 10 '22 11:04 liuzhaowei55

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

Apr 11 '22 13:04 JitenderKumar2001

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

Apr 11 '22 13:04 liuzhaowei55

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]

Apr 11 '22 23:04 raymondKelly

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.

Apr 11 '22 23:04 AkifumiSato

Getting the same error

Apr 12 '22 00:04 arobbins

Looks like this is the issue https://github.com/testing-library/react-testing-library/pull/1041

Apr 12 '22 00:04 camilosegura

Getting the exactly same error as AkifumiSato.

Apr 12 '22 00:04 xchen0326

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

Apr 12 '22 00:04 jooonathann

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"

Apr 12 '22 00:04 jooonathann

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

Apr 12 '22 00:04 xchen0326

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.

Apr 12 '22 05:04 eps1lon

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?

Apr 13 '22 17:04 jplwood

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

May 18 '22 14:05 arikadiusz

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

May 26 '22 10:05 fredbanda

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

May 26 '22 10:05 fredbanda

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

Jun 13 '22 16:06 vvickedvveb

Check this, its working

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

Jun 19 '22 12:06 NishargShah

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.

Jun 24 '22 15:06 prprabhu-ms

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

Sep 22 '22 14:09 basickarl

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

i can

Oct 06 '22 13:10 3142518077

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/

May 13 '23 09:05 paulojeronimo

+1

Oct 23 '23 03:10 yukecs

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.

Jan 28 '24 19:01 BraianS

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

Install

package.json,

src/index.tsx

You're good to go!

Install

change these @testing dependencies to the version below

and react to version

change index.tsx from folder app/index.tsx

`package.json`,

src/`index.tsx`