Ifeanyi Chima

Posted on Apr 17, 2022 • Updated on Nov 18, 2022

How to downgrade from react 18 to 17.0.2

#react #javascript #downgrade #createreactapp

I might not be the only one who is really scared of change in technology causing a break in my code, but you don't have to fear anymore. with the new react 18 deployed, I will show you how to downgrade to react 17.0.2 with ease, so you can have enough time to prepare for the upgrade.

1. Create React App

create a folder and name it react-downgrade-2022 or whatever you want.
Open the terminal and run create-react-app

npx create-react-app .

2. Uninstall react and react-dom

when you have created a react app it will come with react 18 and react-dom 18, but this is not what we want since we are trying to downgrade to react 17.0.2 and react-dom 17.0.2

{
  "name": "react-downgrade-2022",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0", // <===
    "react-dom": "^18.0.0", // <===
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

we would have to uninstall react 18 and react-dom 18, now run
npm uninstall react react-dom

npm uninstall react react-dom

this is done so that we can get rid of react 18 and react-dom 18, remember, we are trying to downgrade to react 17 and react-dom 17.

3 Install react 17 and react-dom 17

now to get what we really want which is react 17 and react-dom 17 once again, run npm install react@17.0.2 react-dom@17.0.2

npm install react@17.0.2 react-dom@17.0.2

React will yell at you with some deprecated warning signs, ignore whatever warning signs that are shown.

4 Change index.js

Remember, because we had already installed react 18, index.js will come with some default react 18 settings, which we would have to change to match that of react 17.0.2

navigate to your index.js file in the src directory.


// react 18

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

now copy and paste the below code to your index.js file


// react 17.0.2

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

5 finish

now, we have successfully downgraded from react 18 to react 17.0.2
run npm start

npm start

Thank you, Please follow me

Top comments (16)

rzeczuchy • Nov 14 '22

I needed this for a tutorial on MERN stack that had dependency conflicts with React 18. Thanks @ifeanyichima

Ifeanyi Chima • Nov 18 '22

Thank you, please follow me.

Ella Mae Freshwater • May 23 '23

was learning to create a project and needed mui v4... needed to downgrade to react 17 to make it work.. thank you so much!

Ifeanyi Chima • Jun 5 '23

Thank you, please follow me.

VirginieLemaire • Feb 25 '23

Thank you very much

Ifeanyi Chima • Mar 14 '23

Thank you, please follow me.

rag74 • Mar 3 '23

thank you very much!< Pretty explained, very simple and helpful

Ifeanyi Chima • Mar 14 '23

Thank you, please follow me.

King Greatman Spirit • Nov 9 '22

Thank you for being a solution provider

Ifeanyi Chima • Nov 10 '22 • Edited

Thank you, please follow me.

Eric Zhang • Nov 18 '22

There is one caveat that the dependency of "@testing-library/react": "^13.0.1" is not downgraded. I think to fully support react17, this should be of version 12 not 13. Do you know how to fix this issue?