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

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

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

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" 

• 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.

1. You go to your folder file structure and delete both package-lock.json ( yarn.lock for yarn) file and node_modules file.

2. 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.

3. After go to Your index.js file change,

import ReactDOM from 'react-dom/client' 

to

import ReactDOM from 'react-dom'; 

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

5. 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--

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

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

1. First create react app npx create-react-app . (. Means current file)

2. 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

4. Run command in bash/terminal npm install

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

5. (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.

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.

Already some good answars, but adding one new one it might help someone

1. Delete node modules, package-lock.json, yarn.lock.

2. In dependency section of package.json

    "dependencies": { "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "firebase": "^8.8.0", "firebase-login": "^1.0.0", "firebase-tools": "^0.1.6", "react": "^16.13.1", "react-currency-format": "^1.0.0", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "^5.0.1" 

   },

3. In index.js

    import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); 

4. npm cache clean --force

5. npm install / yarn install

OPTIONAL

Additilnally if you want to add some more dependencies or any exception may occur the below steps may help.

INSTALL REACT SCRIPTS :

npm install react-scripts 

INSTALL WEBVITALS:

npm install --save-dev web-vitals yarn add web-vitals --dev 

INSTALL ENZYME:

npm i --save-dev enzyme enzyme-adapter-react-16 

INSTALL JEST:

npm install --save-dev jest yarn add --dev jest yarn add --dev babel-jest babel-core 

It's WORKED for me..

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

3. For installing react-dom version 17.0.2 run this command.

   npm install --save [email protected]

• Enjoy and Add Comment if it's worked for you

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

npm i react@latest react-dom@latest npm i [email protected] [email protected]

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

Change Package.json file: Do the following changes in package.json

“react”: “^19.0.0” ➡️ “react”: “^17.0.0” or any version you want “react-dom”: “^19.0.0” ➡️ “react-dom”: “^17.0.0” or any version you want

Remove “node_modules” and “package-lock.json”: remove both of them as they contain dependencies for previous version.

Adjust the “src/index.js”:

Your index.js file is created as per the new version of react, to make it work you need to do the following changes:

ReactDom should be imported from “react-dom” and not ‘react-dom/client’ the root variable should be assigned value

document.getElementById(‘root’)

Adjust the render method by replacing root.render with ReactDOM.render

Re-install Dependencies: Install the dependencies by command: npm install. After this You will see the node modules and package-lock.json file appears in your project.

Start the project: Start the project with command : npm start and then your project will run without errors and with desired version of react.