BREAKING CHANGE Add support for React 18

Author: jonkoops

packages/documentation-framework/README.md

@@ -28,10 +28,10 @@ We publish this theme [on npm.](https://www.npmjs.com/package/@patternfly/docume
 This should not be needed, but if you encounter errors installing the above devDependencies, try adding one or more of these resolutions to your package.json file:
 ```
 "resolutions": {
-  "@types/react": "^16.8.0",
-  "@types/react-dom": "^16.8.0",
-  "react": "16.8.0",
-  "react-dom": "16.8.0",
+  "@types/react": "^18",
+  "@types/react-dom": "^18",
+  "react": "^18",
+  "react-dom": "^18",
   "chromedriver": "102.0.0",
   "node-sass": "7.0.1",
   "puppeteer": "14.3.0",

packages/documentation-framework/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router, useLocation } from '@reach/router';
 import 'client-styles'; // Webpack replaces this import: patternfly-docs.css.js
 import { SideNavLayout } from '@patternfly/documentation-framework/layouts';
@@ -107,8 +107,15 @@ const isPrerender = process.env.PRERENDER;
 // Don't use ReactDOM in SSR
 if (!isPrerender) {
   function render() {
-    const renderFn = isProd ? ReactDOM.hydrate : ReactDOM.render;
-    renderFn(<App />, document.getElementById('root'));
+    const container = document.getElementById('root');
+    // TODO: Enable StrictMode: https://reactjs.org/docs/strict-mode.html
+    const app = <App />;
+
+    if (isProd) {
+      hydrateRoot(container, app);
+    } else {
+      createRoot(container).render(app);
+    }
   }
   // On first load, await promise for the current page to avoid flashing a "Loading..." state
   const Component = getAsyncComponent(null);

packages/documentation-framework/helpers/codesandbox.js

@@ -179,14 +179,16 @@ function getReactParams(title, code, scope, lang, relativeImports) {
 </html>`,
       },
       [lang === 'ts' ? 'index.tsx' : 'index.js']: {
-        content: `import ReactDOM from 'react-dom';
+        content: `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import "@patternfly/react-core/dist/styles/base.css";
 import './fonts.css';
 
 ${code}
 
-const rootElement = document.getElementById("root");
-ReactDOM.render(<${toRender} />, rootElement);`
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(<StrictMode><${toRender} /></StrictMode>);`
       },
       'fonts.css': {
         content: overpass
@@ -195,8 +197,8 @@ ReactDOM.render(<${toRender} />, rootElement);`
         content: {
           dependencies: {
             ...dependencies,
-            'react': '^16.8.0',
-            'react-dom': '^16.8.0'
+            'react': '^18',
+            'react-dom': '^18'
           }
         },
       },

packages/documentation-framework/package.json

@@ -81,7 +81,7 @@
     "@patternfly/react-code-editor": ">=4.43.16",
     "@patternfly/react-core": ">=4.202.16",
     "@patternfly/react-table": ">=4.71.16",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8 || ^17 || ^18",
+    "react-dom": "^16.8 || ^17 || ^18"
   }
 }

packages/documentation-framework/scripts/webpack/webpack.server.config.js

@@ -12,7 +12,7 @@ const serverConfig = () => {
     target: 'node', // Load chunks using require
     plugins: [
       new webpack.DefinePlugin({
-        'process.env.PRERENDER': true // In app.js don't call ReactDOM.render
+        'process.env.PRERENDER': true // In app.js don't call render
       }),
     ],
     optimization: {

packages/v4/package.json

@@ -20,8 +20,8 @@
     "@patternfly/documentation-framework": "^1.3.7",
     "@patternfly/quickstarts": "^2.2.4",
     "@patternfly/react-docs": "5.103.22",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8 || ^17 || ^18",
+    "react-dom": "^16.8 || ^17 || ^18"
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "4.3.0",

yarn.lock

@@ -11224,14 +11224,13 @@ [email protected]:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-"react-dom@^16.8.0 || ^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+"react-dom@^16.8 || ^17 || ^18":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 [email protected]:
   version "9.0.0"
@@ -11294,13 +11293,12 @@ react-virtualized@^9.21.1:
     prop-types "^15.7.2"
     react-lifecycles-compat "^3.0.4"
 
-"react@^16.8.0 || ^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+"react@^16.8 || ^17 || ^18":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-cmd-shim@^1.0.1:
   version "1.0.5"
@@ -11962,13 +11960,12 @@ sax@^1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^1.0.0:
   version "1.0.0"