How to use create-react-app with an older React version?

Question

When using create-react-app with custom-react-scripts I always end up with React 16 (latest) installed. Is there a way to create a new project with an older version, like React 15?

You can specify version of package in package.json. This might help: https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json — Rajesh, Oct 04 '17 at 14:00
I directly changed package.json to version 15.6.2, and to my suprise it just worked! Make it an answer, let me upvote you. — rodrigocfd, Oct 04 '17 at 14:11
I'm glad that I was able to help you. If you are satisfied with solution, you can just remove the post as I would mark it as duplicate anyways. Have a good day :-) — Rajesh, Oct 04 '17 at 14:25
Possible duplicate of [npm install the exact package version specified in package.json](https://stackoverflow.com/questions/41003470/npm-install-the-exact-package-version-specified-in-package-json) — Rajesh, Oct 04 '17 at 14:52

symplytheo · Answer 1 · 2022-10-26T14:22:51.213

165

If you're here because of react v18, and you want to go down to the previous non-change breaking version, here's what i did:

in your package.json replace:

"react": "^18.0.0"
"react-dom": "^18.0.0"

with

"react": "^17.0.2"
"react-dom": "^17.0.2"

Then go to your entry file index.js At the top, replace:

import ReactDOM from 'react-dom/client'

with

import ReactDOM from 'react-dom';

Still in your index.js file, replace:

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

with

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

Delete your node_modules and run yarn install or npm install
After installation, run yarn start or npm run start
Enjoy

edited Oct 26 '22 at 14:22

answered Apr 18 '22 at 06:46

symplytheo

1,661
1
5
4

15

I received errors while trying to install a new package. To fix, I also had to change `@testing-library/react` to version 12 in my package.json. I.e.: "@testing-library/react": "^12.0.0" and "@testing-library/user-event": "^12.0.0" – Matt May 21 '22 at 08:26
on unix system you can run: `APP_NAME='my-app' && npx create-react-app $APP_NAME && cd $APP_NAME && npm install react@17 react-dom@17 @testing-library/react@12 @types/react@17 @types/react-dom@17 @testing-library/react@12 @testing-library/user-event@12`. Than you only need to update the index.tsx file as described above. – Jonathan Aug 26 '22 at 11:18
1

Is react-scripts: 5.0.1 compatible with react 17? or do I have to downgrade it to version 4 too? – Mohammad Sep 18 '22 at 13:05

score 22 · Answer 2 · answered Oct 13 '17 at 21:19

22

It seems that you can just go ahead and use it to generate a React 16 app, then edit package.json and run npm i (or npm install; npm i is just a shortcut).

I just left the react-scripts version at the latest version and only changed the versions of react and react-dom, and it worked:

"devDependencies": {
  "react-scripts": "1.0.14"
},
"dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1"
},

answered Oct 13 '17 at 21:19

Matt Browne

12,169
4
59
75

6

make sure to delete node_modules folder before doing 'npm install' – Shamseer Ahammed Aug 05 '21 at 07:44

score 16 · Answer 3 · answered Apr 18 '22 at 11:19

16

Complementing the answers described above, after all the manipulation, I had to update this libs(for TS template) :

"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^12.5.0"

answered Apr 18 '22 at 11:19

FreeDevM

161
1
3

score 7 · Answer 4 · answered Jun 20 '22 at 10:10

When You Using

npx create-react-app app-name

it will always install latest react packages. Then, in react 18.2.0, It is some of different about previous version.

If you want to downgrade your current react version to previous version of react, Try These 5 Steps.

You go to your folder file structure and delete both package-lock.json ( yarn.lock for yarn) file and node_modules file.
After you go to your package.json file and change and edit these dependencies :

"react": "^18.2.0",
"react-dom": "^18.2.0",

to

"react": "^17.0.2",
"react-dom": "^17.0.2",

in your package.json dependencies file like this.

After go to Your index.js file change,

import ReactDOM from 'react-dom/client'

to

import ReactDOM from 'react-dom';

After change your index.js file and change below part of index file.

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

to

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

Finally, You can open the terminal and run

if you are using npm -->> npm install

and after the installing part you can run app npm start.

or

if you are using yarn -->> yarn install

and after the installing part you can run app yarn start.

--Thank You-- --Happy Coding--

score 5 · Answer 5 · edited Jun 17 '22 at 18:47

If you already created with React 18, you can downgrade version 18 to previous verions of react with a few steps. You will need to do modifications in two files which are package.json and index.js . You should delete also node_modules

Step 1

Your index.js probably looks like this now

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

You should change import of ReactDOM and cancel const root line

New code of index.js should be like this

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

Step 2

Go to your package.json file and update desired react version in dependencies

"dependencies": {
    ...
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    ...
  },

Step 3

Delede your node_modules and If you are using npm do npm i. If you are using yarn do yarn install. After this step you are good to run app with npm start or yarn start.

Step 4 (OPTIONAL: If you are still having problems but I do not recommend doing it)

Delete your package-lock.json (for npm) or yarn.lock file (for yarn) and start back from Step 3

Dennis · Answer 6 · 2022-04-14T20:42:36.813

4

I ran into this problem, especially with the new create-react-app v18. All I did was to delete my package-lock.json file and also my node_modules folder. I edited package.json afterwards, replaced react-dom and react with the version that I want as below:

"react": "^17.0.2",
"react-dom": "^17.0.2",

Finally, I installed my packages again using npm install

edited Apr 14 '22 at 20:42

answered Apr 11 '22 at 23:49

Dennis

105
1
5

I think there were some breaking changes, and the CRA index (and maybe other files) were updated to the new way to do things in v18 -- haven't tried yet, but might need to undo the changes described here https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html – Justin L. Apr 13 '22 at 17:05

score 3 · Answer 7 · answered Nov 13 '22 at 07:23

First create react app npx create-react-app . (. Means current file)
Delete node_modules & package-lock.json

 "@material-ui/core": "^4.12.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "firebase": "^8.8.0",
    "firebase-login": "^1.0.0",
    "firebase-tools": "^9.16.0",
    "react": "^17.0.2",
    "react-currency-format": "^1.0.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"

As per require version of react & react-dom along with other required

Run command in bash/terminal npm install

(it will download all data as per package.json)

(optional) In project src/index.js

ReactDOM.render(`enter code here`
  <React.StrictMode>
  <App />
  </React.StrictMode>,
  document.getE1ementById( 'root' )
);
 
Replace this with 
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This.

score 0 · Answer 8 · edited Apr 21 '22 at 12:33

0

First you have to install npm in your system Then For Create react app you have to run below command

sudo npm init react-app my-app --scripts-version 1.1.5

cd my-app

sudo npm install --save react@16.0.0

sudo npm install --save react-dom@16.0.0

It worked like a charm for me.

edited Apr 21 '22 at 12:33

Gmosy Gnaq

597
1
5
18

answered Apr 20 '20 at 04:17

manoj patel

1,150
12
10

3

Usually using `sudo` isn't a good idea for a folder containing an app – Matt Browne Jun 13 '21 at 22:08
this worked for me in ubuntu 20.04. CRA kept crashing but this one launched in a minute – Hank W Nov 21 '21 at 18:00

score 0 · Answer 9 · answered Jul 06 '22 at 10:15

It's WORKED for me..

Just uninstall the react 18 and install the react 17.

Run This Command

npm uninstall react

2.Then install React 17.0.2 Just run this command.

npm install react@17.0.2

For installing react-dom version 17.0.2 run this command.

npm install --save react-dom@17.0.2

Enjoy and Add Comment if it's worked for you

score 0 · Answer 10 · answered Aug 24 '23 at 17:23

you can try the command with respective combination of react and react-dom

npm i react@latest react-dom@latest npm i react@18.2.0 react-dom@17.2.0

This way you can install the react and react dom and get their respective version by react-dom

npm view react version npm view react-dom version

score -3 · Answer 11 · answered Apr 04 '20 at 16:39

-3

Specify your script version while create project

sudo npm init react-app appname --scripts-version 1.0.13

its working for me

answered Apr 04 '20 at 16:39

manoj patel

1,150
12
10

How to use create-react-app with an older React version?

11 Answers11

Linked