Downgrade React 18 to version 17

react-downgrade.md

Downgrade React 18 to version 17

NOTE: this also downgrads webpack to version 4

Step 1: downgrade React modules

1a - Using NPM:

npm remove react react-dom react-scripts
npm add react@^17.0.2 react-dom@^17.0.2 react-scripts@^4.0.3

1b - Using yarn:

yarn remove react react-dom react-scripts
yarn add react@^17.0.2 react-dom@^17.0.2 react-scripts@^4.0.3

Here is a diff of what that might look like in package.json:

{
  "name": "squeebo-does-it",
  "version": "1.3.37",
  "private": true,
  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
  }
}

---

Step 2: use the "old" index.js setup:

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

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

And the diff:

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

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

reportWebVitals();