42

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?

rodrigocfd
  • 4,116
  • 4
  • 21
  • 51
  • 2
    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

7 Answers7

71

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
  • After installation, run yarn start
  • Enjoy
symplytheo
  • 721
  • 3
  • 4
  • 1
    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
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"
},
Matt Browne
  • 11,673
  • 4
  • 53
  • 73
9

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"
FreeDevM
  • 91
  • 1
  • 2
5

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

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
3

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

Evren
  • 3,541
  • 1
  • 6
  • 13
1

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.

Gmosy Gnaq
  • 517
  • 1
  • 4
  • 18
manoj patel
  • 856
  • 6
  • 9
-3

Specify your script version while create project

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

its working for me

manoj patel
  • 856
  • 6
  • 9