DEV Community

Cover image for How to downgrade from react 18 to 17.0.2
Ifeanyi Chima
Ifeanyi Chima

Posted on • Updated on

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.

BMC

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 .
Enter fullscreen mode Exit fullscreen mode

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"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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



npm uninstall react react-dom
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

5 finish

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



npm start
Enter fullscreen mode Exit fullscreen mode

Thank you, Please follow me

linkedin.com/in/ifeanyi-thankgod-chima/
https://twitter.com/ifeanyiTchima

Buy Me A Coffee

Top comments (21)

Collapse
 
rzeczuchy profile image
rzeczuchy •

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

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

Thank you, please follow me.

Collapse
 
alchey_jay profile image
vijay j •

adrian jsm ?

Collapse
 
emfresh2o profile image
Ella Mae Freshwater •

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

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

Thank you, please follow me.

Collapse
 
alchey_jay profile image
vijay j •

what about other dependencies like axios and moment and redux were they affected by the down grade

Collapse
 
rajeshmanne profile image
Rajesh-Manne •

Thanks a lot. This solution was helpful.

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

Thank you, please follow me.

Collapse
 
sohail48 profile image
sohail48 •

Thankyou very much

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

Thank you, please follow me.

Collapse
 
kinggreatmanspirit profile image
King Greatman Spirit •

Thank you for being a solution provider

Collapse
 
ifeanyichima profile image
Ifeanyi Chima • • Edited

Thank you, please follow me.

Collapse
 
rag74 profile image
rag74 •

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

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

Thank you, please follow me.

Collapse
 
virginiel profile image
VirginieLemaire •

Thank you very much

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

Thank you, please follow me.

Collapse
 
eric_zhang_8e76523af5fbde profile image
Eric Zhang •

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?

Collapse
 
mazharkhan77 profile image
Mazhar™ मजहर મઝહર مظہر 🇮🇳 •

Yes, I am getting this error too. but it is not affecting my code compilation and code is running smoothly.

Collapse
 
jimjacob29 profile image
JIMMY JACOB •

github.com/testing-library/react-t...

Collapse
 
alchey_jay profile image
vijay j •

Guys Im getting error while installing other dependencies like axios , redux , redux-thunk , moment and base 64 .

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react@13.4.0
npm ERR! Found: react@17.0.2

npm ERR! node_modules/react
npm ERR! peer react@"17.0.2" from react-dom@17.0.2
npm ERR! node_modules/react-dom

npm ERR! react-dom@"^17.0.2" from the root project
npm ERR! peer react@">= 16" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"5.0.1" from the root project
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! node_modules/@testing-library/react
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR!
npm ERR! For a full report see:

Collapse
 
gstark10 profile image
Udechukwu Godson • • Edited

Cool..buh don't understand number 4,pls where exactly should I paste the index js from my src.@ifeanyichima

View full discussion (21 comments)

Read next

mnkow profile image

From Monolith to Monorepo: A Next.js Migration Story

Michal Kowalkowski -

arghodev profile image

🌀What’s New in TypeScript: Essential Updates, Advantages, and Tips for 2024

Argho Dev -

sagarmuchhal profile image

How to use Cookie Consent in a React App with react-cookie-consent

Muchhal Sagar -

mitchell_cheng profile image

String - JavaScript Challenges

Mitchell -