feat: support React 18

circle.yml

@@ -27,7 +27,7 @@ mainBuildFilters: &mainBuildFilters
     branches:
       only:
         - develop
-        - issue-22147-nohoist
+        - lmiller/21381-react-18-with-ignore
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -38,7 +38,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ linux-arm64, << pipeline.git.branch >> ]
     - matches:
-          pattern: "-release$"
+          pattern: "lmiller/21381-react-18-with-ignore"
           value: << pipeline.git.branch >>
 
 linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
@@ -128,7 +128,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "issue-22147-nohoist" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "lmiller/21381-react-18-with-ignore" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

npm/react/package.json

@@ -15,7 +15,8 @@
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "dependencies": {
-    "debug": "^4.3.2"
+    "debug": "^4.3.2",
+    "semver": "7.3.2"
   },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
@@ -37,10 +38,10 @@
     "vite-plugin-require-transform": "1.0.3"
   },
   "peerDependencies": {
-    "@types/react": "^16.9.16 || ^17.0.0",
+    "@types/react": "^16.9.16 || ^17.0.0 || ^18.0.0",
     "cypress": "*",
-    "react": "^=16.x || ^=17.x",
-    "react-dom": "^=16.x || ^=17.x"
+    "react": "^=16.x || ^=17.x || ^=18.x",
+    "react-dom": "^=16.x || ^=17.x || ^=18"
   },
   "files": [
     "dist"

npm/react/rollup.config.js

@@ -24,6 +24,7 @@ function createEntry (options) {
     external: [
       'react',
       'react-dom',
+      'react-dom/client',
     ],
     plugins: [
       resolve(), commonjs(),
@@ -36,6 +37,7 @@ function createEntry (options) {
       globals: {
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react-dom/client': 'ReactDOMClient',
       },
     },
   }

npm/react/src/mount.ts

@@ -1,5 +1,6 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import type * as React from 'react'
+import type * as ReactDOM from 'react-dom'
+import major from 'semver/functions/major'
 import getDisplayName from './getDisplayName'
 import {
   injectStylesBeforeElement,
@@ -41,6 +42,28 @@ const injectStyles = (options: MountOptions) => {
  **/
 export const mount = (jsx: React.ReactNode, options: MountOptions = {}) => _mount('mount', jsx, options)
 
+function isLessThan18 (reactVersion: typeof React) {
+  return major(reactVersion.version) < 18
+}
+
+async function importReactModules () {
+  let react = await import('react')
+
+  // @ts-ignore - depending on bundler, sometimes we need to grab `.default`
+  react = react?.default ?? react
+  const reactDomImport = isLessThan18(react)
+    ? () => import('react-dom')
+    // @ts-ignore
+    : () => import('react-dom/client')
+
+  const reactDom = await reactDomImport()
+
+  return {
+    react,
+    reactDom,
+  }
+}
+
 let lastMountedReactDom: (typeof ReactDOM) | undefined
 
 /**
@@ -63,10 +86,6 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
   return cy
   .then(injectStyles(options))
   .then(() => {
-    const reactDomToUse = options.ReactDom || ReactDOM
-
-    lastMountedReactDom = reactDomToUse
-
     const el = getContainerEl()
 
     if (!el) {
@@ -84,54 +103,72 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
       key,
     }
 
-    const reactComponent = React.createElement(
-      options.strict ? React.StrictMode : React.Fragment,
-      props,
-      jsx,
-    )
-    // since we always surround the component with a fragment
-    // let's get back the original component
-    const userComponent = (reactComponent.props as {
-      key: string
-      children: React.ReactNode
-    }).children
-
-    reactDomToUse.render(reactComponent, el)
-
-    if (options.log !== false) {
-      Cypress.log({
-        name: type,
-        type: 'parent',
-        message: [message],
-        // @ts-ignore
-        $el: (el.children.item(0) as unknown) as JQuery<HTMLElement>,
-        consoleProps: () => {
-          return {
-            // @ts-ignore protect the use of jsx functional components use ReactNode
-            props: jsx.props,
-            description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
-            home: 'https://github.com/cypress-io/cypress',
-          }
-        },
-      }).snapshot('mounted').end()
+    const logMount = () => {
+      if (options.log !== false) {
+        Cypress.log({
+          name: type,
+          type: 'parent',
+          message: [message],
+          // @ts-ignore
+          $el: (el.children.item(0) as unknown) as JQuery<HTMLElement>,
+          consoleProps: () => {
+            return {
+              // @ts-ignore protect the use of jsx functional components use ReactNode
+              props: jsx.props,
+              description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
+              home: 'https://github.com/cypress-io/cypress',
+            }
+          },
+        }).snapshot('mounted').end()
+      }
     }
 
-    return (
-      // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
-      cy.wrap<React.ReactNode>(userComponent, { log: false })
-      .as(displayName)
-      .then(() => {
-        return cy.wrap<MountReturn>({
-          component: userComponent,
-          rerender: (newComponent) => _mount('rerender', newComponent, options, key),
-          unmount: () => _unmount({ boundComponentMessage: jsxComponentName, log: true }),
-        }, { log: false })
-      })
-      // by waiting, we delaying test execution for the next tick of event loop
-      // and letting hooks and component lifecycle methods to execute mount
-      // https://github.com/bahmutov/cypress-react-unit-test/issues/200
-      .wait(0, { log: false })
-    )
+    return importReactModules()
+    .then(({ react, reactDom }) => {
+      // @ts-ignore - depending on bundler, sometimes we need to grab `.default`
+      const reactDomToUse = options.ReactDom?.default ?? options.ReactDom ?? reactDom?.default ?? reactDom
+
+      lastMountedReactDom = reactDomToUse
+
+      const reactComponent = react.createElement(
+        options.strict ? react.StrictMode : react.Fragment,
+        props,
+        jsx,
+      )
+      // since we always surround the component with a fragment
+      // let's get back the original component
+      const userComponent = (reactComponent.props as {
+        key: string
+        children: React.ReactNode
+      }).children
+
+      if (isLessThan18(react)) {
+        reactDomToUse.render(reactComponent, el)
+      } else {
+        const root = reactDomToUse.createRoot(el)
+
+        root.render(reactComponent)
+      }
+
+      logMount()
+
+      return (
+        // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
+        cy.wrap<React.ReactNode>(userComponent, { log: false })
+        .as(displayName)
+        .then(() => {
+          return cy.wrap<MountReturn>({
+            component: userComponent,
+            rerender: (newComponent) => _mount('rerender', newComponent, options, key),
+            unmount: () => _unmount({ boundComponentMessage: jsxComponentName, log: true }),
+          }, { log: false })
+        })
+        // by waiting, we delaying test execution for the next tick of event loop
+        // and letting hooks and component lifecycle methods to execute mount
+        // https://github.com/bahmutov/cypress-react-unit-test/issues/200
+        .wait(0, { log: false })
+      )
+    })
   // Bluebird types are terrible. I don't think the return type can be carried without this cast
   }) as unknown as globalThis.Cypress.Chainable<MountReturn>
 }

npm/react/src/mountHook.ts

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { mount } from './mount'
 
 type MountHookResult<T> = {
@@ -77,11 +75,14 @@ function TestHook ({ callback, onError, children }: TestHookProps) {
 export const mountHook = <T>(hookFn: (...args: any[]) => T) => {
   const { result, setValue, setError } = resultContainer<T>()
 
-  const componentTest: React.ReactElement = React.createElement(TestHook, {
-    callback: hookFn,
-    onError: setError,
-    children: setValue,
-  })
+  return import('react').then((reactMod) => {
+    let react = reactMod?.default ?? reactMod
+    const componentTest = react.createElement(TestHook, {
+      callback: hookFn,
+      onError: setError,
+      children: setValue,
+    })
 
-  return mount(componentTest).then(() => result)
+    return mount(componentTest).then(() => result)
+  })
 }

npm/vite-dev-server/client/reactDomClientPlaceholder.js

@@ -0,0 +1,2 @@
+// Placeholder ...
+export default {}

npm/vite-dev-server/src/plugins/index.ts

@@ -1,3 +1,5 @@
 export * from './inspect'
 
 export * from './cypress'
+
+export * from './react18'

npm/vite-dev-server/src/plugins/react18.ts

@@ -0,0 +1,31 @@
+import type { Plugin } from 'vite'
+import path from 'path'
+
+/**
+ * React 18 has changed it's API.
+ * https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
+ * We need to conditionally import `react-dom/client` in our React adapter:
+ *
+ *   import('react-dom/client', (mod) => {...})
+ *
+ * In a browser environment, we can just try/catch, however Vite does some optimizations
+ * and will fail during this step if react-dom/client does not exist (React <= 17).
+ *
+ * To avoid this error and seamlessly support React 17 and 18 side by side we simply
+ * stub out the dynamic react-dom/client import and return a placeholder module.
+ */
+export const React18 = (projectRoot: string): Plugin => {
+  return {
+    name: 'cypress:missing-react-dom-client',
+    resolveId (source: string) {
+      if (source === 'react-dom/client') {
+        try {
+          return require.resolve('react-dom/client', { paths: [projectRoot] })
+        } catch (e) {
+          // This is not a react 18 project, need to stub out to avoid error
+          return path.resolve(__dirname, '..', '..', 'client', 'reactDomClientPlaceholder.js')
+        }
+      }
+    },
+  }
+}

npm/vite-dev-server/src/resolveConfig.ts

@@ -11,7 +11,7 @@ import path from 'path'
 
 import { configFiles } from './constants'
 import type { ViteDevServerConfig } from './devServer'
-import { Cypress, CypressInspect } from './plugins/index'
+import { Cypress, CypressInspect, React18 } from './plugins/index'
 import type { Vite } from './getVite'
 
 const debug = debugFn('cypress:vite-dev-server:resolve-config')
@@ -84,6 +84,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
       },
     },
     plugins: [
+      React18(config.cypressConfig.projectRoot),
       Cypress(config, vite),
       CypressInspect(config),
     ].filter((p) => p != null),

npm/vite-dev-server/test/resolveConfig.spec.ts

@@ -28,8 +28,9 @@ describe('resolveConfig', function () {
 
       const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-      expect(viteConfig.plugins).to.have.lengthOf(1)
-      expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+      expect(viteConfig.plugins).to.have.lengthOf(2)
+      expect(viteConfig.plugins[0].name).to.equal('cypress:missing-react-dom-client')
+      expect(viteConfig.plugins[1].name).to.equal('cypress:main')
     })
 
     context('with CYPRESS_INTERNAL_VITE_INSPECT provided', () => {
@@ -47,8 +48,10 @@ describe('resolveConfig', function () {
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-        expect(viteConfig.plugins).to.have.lengthOf(2)
-        expect(viteConfig.plugins[1].name).to.equal('cypress:inspect')
+        expect(viteConfig.plugins).to.have.lengthOf(3)
+        expect(viteConfig.plugins[0].name).to.equal('cypress:missing-react-dom-client')
+        expect(viteConfig.plugins[1].name).to.equal('cypress:main')
+        expect(viteConfig.plugins[2].name).to.equal('cypress:inspect')
       })
 
       it('should not add inspect plugin if not installed', async () => {
@@ -57,8 +60,9 @@ describe('resolveConfig', function () {
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-        expect(viteConfig.plugins).to.have.lengthOf(1)
-        expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+        expect(viteConfig.plugins).to.have.lengthOf(2)
+        expect(viteConfig.plugins[0].name).to.equal('cypress:missing-react-dom-client')
+        expect(viteConfig.plugins[1].name).to.equal('cypress:main')
       })
     })
   })

npm/webpack-dev-server/package.json

@@ -22,6 +22,7 @@
     "html-webpack-plugin-4": "npm:html-webpack-plugin@^4",
     "html-webpack-plugin-5": "npm:html-webpack-plugin@^5",
     "local-pkg": "0.4.1",
+    "semver": "7.3.2",
     "speed-measure-webpack-plugin": "1.4.2",
     "tslib": "^2.3.1",
     "webpack-dev-server": "^4.7.4",

npm/webpack-dev-server/src/helpers/nextHandler.ts

@@ -166,7 +166,7 @@ function getRunWebpackSpan (devServerConfig: WebpackDevServerConfig): { runWebpa
 
 const originalModuleLoad = (Module as ModuleClass)._load
 
-function sourceNextWebpackDeps (devServerConfig: WebpackDevServerConfig) {
+export function sourceNextWebpackDeps (devServerConfig: WebpackDevServerConfig) {
   const framework = sourceFramework(devServerConfig)!
   const webpack = sourceNextWebpack(devServerConfig, framework)
   const webpackDevServer = sourceWebpackDevServer(devServerConfig, framework)