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?

Answer 1

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

Answer 2

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"
},

Answer 3

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"

Answer 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

Answer 5

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

Answer 6

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 [email protected]

sudo npm install --save [email protected]

It worked like a charm for me.