Add support for newer versions of react-dom

In v19, you need to import from react-dom/client and use the createRoot
API.

Author: lencioni

.github/workflows/test.yml

@@ -12,7 +12,8 @@ jobs:
     strategy:
       matrix:
         node: ['18.16.0', 20, 22]
-    name: Node ${{ matrix.node }}
+        react: ['16', '17', '18', '19']
+    name: Node ${{ matrix.node }} / React ${{ matrix.react }}
     steps:
       - uses: actions/checkout@v4
 
@@ -24,6 +25,11 @@ jobs:
 
       - run: yarn install --frozen-lockfile --ignore-engines
 
+      - name: Install react and react-dom at version ${{ matrix.react }}
+        run: |
+          yarn remove react react-dom --ignore-engines
+          yarn add react@${{ matrix.react }} react-dom@${{ matrix.react }} --ignore-engines
+
       - run: yarn test --colors
 
   lint:

package.json

@@ -95,8 +95,8 @@
     "jest": "^29.7.0",
     "multiparty": "^4.2.2",
     "prettier": "^3.5.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
     "webpack": "^5.2.0"
   },

src/createDynamicEntryPoint.js

@@ -51,25 +51,50 @@ export default async function createDynamicEntryPoint({
     'window.snaps = {};',
   ];
   if (type === 'react') {
-    const pathToReactDom = require.resolve('react-dom');
     const pathToRW = renderWrapperModule || require.resolve('./renderWrapperReact');
     strings.push(
       `let renderWrapper = require('${pathToRW}');`,
       'renderWrapper = renderWrapper.default || renderWrapper;',
     );
-    strings.push(
-      `
-      const ReactDOM = require('${pathToReactDom}');
-      window.happoRender = (reactComponent, { rootElement, component, variant }) =>
-        ReactDOM.render(renderWrapper(reactComponent, { component, variant }), rootElement);
 
-      window.happoCleanup = () => {
-        for (const element of document.body.children) {
-          ReactDOM.unmountComponentAtNode(element);
-        }
-      };
-    `.trim(),
-    );
+    const reactDomVersion = require('react-dom/package.json').version;
+    const reactDomMajorVersion = parseInt(reactDomVersion.split('.', 1)[0], 10);
+    if (reactDomMajorVersion >= 18) {
+      const pathToReactDom = require.resolve('react-dom/client');
+      strings.push(
+        `
+        const ReactDOM = require('${pathToReactDom}');
+        let root;
+        window.happoRender = (reactComponent, { rootElement, component, variant }) => {
+          root = ReactDOM.createRoot(rootElement);
+          root.render(renderWrapper(reactComponent, { component, variant }));
+        };
+
+        window.happoCleanup = () => {
+          if (root) {
+            root.unmount();
+          }
+        };
+        `.trim(),
+      );
+    } else {
+      // Older versions of React DOM
+      const pathToReactDom = require.resolve('react-dom');
+      strings.push(
+        `
+        const ReactDOM = require('${pathToReactDom}');
+        window.happoRender = (reactComponent, { rootElement, component, variant }) => {
+          ReactDOM.render(renderWrapper(reactComponent, { component, variant }), rootElement);
+        };
+
+        window.happoCleanup = () => {
+          for (const element of document.body.children) {
+            ReactDOM.unmountComponentAtNode(element);
+          }
+        };
+        `.trim(),
+      );
+    }
   } else {
     const pathToRW = renderWrapperModule || require.resolve('./renderWrapper');
     strings.push(

test/integrations/examples/Foo-react-happo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 
 import Button from './Button.ffs';
 import ThemeContext from '../theme';
@@ -22,7 +22,7 @@ export const anotherVariant = () => {
 const PortalComponent = ({ children }) => {
   const element = document.createElement('div');
   document.body.appendChild(element);
-  return ReactDOM.createPortal(children, element);
+  return createPortal(children, document.body);
 };
 
 export const portalExample = () => (
@@ -44,7 +44,9 @@ export const innerPortal = () => (
 class AsyncComponent extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      label: 'Not ready',
+    };
     this.setLabel = this.setLabel.bind(this);
   }
 

yarn.lock

@@ -4939,7 +4939,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5016,15 +5016,13 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-dom@^16.3.2:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.2"
 
 react-is@^16.13.1:
   version "16.13.1"
@@ -5036,14 +5034,12 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react@^16.3.2:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 readable-stream@^2.0.5, readable-stream@^2.2.2:
   version "2.3.7"
@@ -5294,13 +5290,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0:
   version "3.3.0"