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-2022or 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 runnpm uninstall react react-dom
npm uninstall react react-domthis 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, runnpm install react@17.0.2 react-dom@17.0.2
npm install react@17.0.2 react-dom@17.0.2React 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 yourindex.js file in thesrc directory.
// react 18importReactfrom'react';importReactDOMfrom'react-dom/client';import'./index.css';importAppfrom'./App';importreportWebVitalsfrom'./reportWebVitals';constroot=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-vitalsreportWebVitals();now copy and paste the below code to yourindex.js file
// react 17.0.2importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';importAppfrom'./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
runnpm start
npm startThank you, Please follow me
Top comments(24)
I needed this for a tutorial on MERN stack that had dependency conflicts with React 18. Thanks@ifeanyichima
Thank you, please follow me.
- EducationBloomtech Institute of Technology aka Lambda School
- WorkA Full-Stack Dev Intern at DevShop24
- Joined
was learning to create a project and needed mui v4... needed to downgrade to react 17 to make it work.. thank you so much!
Thank you, please follow me.
Thanks a lot. This solution was helpful.
Thank you, please follow me.
Really Thanks bro !
Thank you, please follow me
Thank you for being a solution provider
Thank you, please follow me.
Thank you very much
Thank you, please follow me.
Thank you, please follow me.
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?
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" fromreact-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" fromreact-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:
For further actions, you may consider blocking this person and/orreporting abuse
