[working] React 18 upgrade

Lakith-Rambukkanage · Feb 1, 2024 · 740a7b6 · 740a7b6
1 parent eac9ad2
commit 740a7b6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/portals/devportal/src/main/webapp/package.json b/portals/devportal/src/main/webapp/package.json
@@ -70,11 +70,11 @@
         "query-string": "^7.1.3",
         "random-material-color": "^1.0.5",
         "rc-notification": "^4.6.1",
-        "react": "^17.0.0",
+        "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
         "react-autosuggest": "^10.1.0",
         "react-copy-to-clipboard": "^5.1.0",
-        "react-dom": "^17.0.0",
+        "react-dom": "^18.2.0",
         "react-helmet": "^6.1.0",
         "react-hot-toast": "^2.4.0",
         "react-intl": "v5.25.1",

diff --git a/portals/devportal/src/main/webapp/source/index.jsx b/portals/devportal/src/main/webapp/source/index.jsx
@@ -16,17 +16,31 @@
  * under the License.
  */
 
-import 'react-app-polyfill/ie11';
-import 'react-app-polyfill/stable';
-import ReactDOM from 'react-dom';
+// import 'react-app-polyfill/ie11';
+// import 'react-app-polyfill/stable';
+// import ReactDOM from 'react-dom';
+// import React from 'react';
+// import DevPortal from './src/DevPortal';
+// import './customPolyfill';
+//
+//
+// // What about production? # https://github.com/gaearon/react-hot-loader#what-about-production
+// ReactDOM.render(
+//     <React.StrictMode>
+//         <DevPortal />
+//     </React.StrictMode>,
+//     document.getElementById('react-root'),
+// );
+
+// React 18 upgrade
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import DevPortal from './src/DevPortal';
-import './customPolyfill';
 
-// What about production? # https://github.com/gaearon/react-hot-loader#what-about-production
-ReactDOM.render(
-    <React.StrictMode>
-        <DevPortal />
-    </React.StrictMode>,
-    document.getElementById('react-root'),
+const container = document.getElementById('react-root');
+const root = createRoot(container);
+root.render(
+    // <React.StrictMode>
+    <DevPortal />,
+    // </React.StrictMode>,
 );