support react 18

Author: huozhi

package.json

@@ -115,9 +115,9 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "react": "17.0.2",
-    "react-18": "npm:react@18",
+    "react-18": "npm:react@18.0.0-alpha-e6be2d531",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:react-dom@18",
+    "react-dom-18": "npm:react-dom@18.0.0-alpha-e6be2d531",
     "react-ssr-prepass": "1.0.8",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",

packages/next/client/index.tsx

@@ -516,8 +516,8 @@ function renderReactElement(
         reactRoot = ReactDOM18.createRoot(domEl, { hydrate: shouldHydrate })
         reactRoot.render(reactEl)
       }
-      shouldHydrate = false
     }
+    shouldHydrate = false
   } else {
     // The check for `.hydrate` is there to support React alternatives like preact
     if (shouldHydrate) {

test/integration/react-18/prerelease/next.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  webpack(config) {
+    const { alias } = config.resolve
+    // FIXME: resolving react/jsx-runtime https://github.com/facebook/react/issues/20235
+    alias['react/jsx-dev-runtime'] = require.resolve('react/jsx-dev-runtime.js')
+    alias['react/jsx-runtime'] = require.resolve('react/jsx-runtime.js')
+
+    // Use react 18
+    alias['react'] = require.resolve('react-18')
+    alias['react-dom'] = require.resolve('react-dom-18')
+
+    return config
+  },
+}

test/integration/react-18/prerelease/node_modules/react-dom/index.js

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "react": "*",
     "react-dom": "*"
   }
 }

test/integration/react-18/prerelease/package.json

@@ -1,3 +1,6 @@
 export default function Index() {
+  if (typeof window !== 'undefined') {
+    window.didHydrate = true
+  }
   return <p>Hello</p>
 }

test/integration/react-18/prerelease/pages/index.js

@@ -1,7 +1,3 @@
 export default function Index() {
-  if (typeof window !== 'undefined') {
-    window.didHydrate = true
-  }
-  return 'details'
   return <p>Hello</p>
 }

test/integration/react-18/supported/next.config.js

@@ -82,19 +82,10 @@ describe('React 18 Support', () => {
     let app
     let appPort
     beforeAll(async () => {
-      jest.mock('react', () => {
-        return jest.requireActual('react-18')
-      })
-      jest.mock('react-dom', () => {
-        return jest.requireActual('react-dom-18')
-      })
       await fs.remove(join(appDir, '.next'))
-      const { stderr } = await nextBuild(appDir, [dirPrerelease], {
-        stderr: true,
-      })
-      console.error(stderr)
+      await nextBuild(appDir, [dirPrerelease])
       appPort = await findPort()
-      app = await nextStart(appDir, appPort, { stderr: true })
+      app = await nextStart(appDir, appPort)
     })
     afterAll(async () => await killApp(app))
     it('hydrates correctly for normal page', async () => {

test/integration/react-18/supported/pages/index.js

@@ -15632,15 +15632,15 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-"react-18@npm:react@18":
+"react-18@npm:react@18.0.0-alpha-e6be2d531":
   version "18.0.0-alpha-e6be2d531"
   resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-e6be2d531.tgz#c5cf6d5706f7b6411d36848b483a7937c94fc5c9"
   integrity sha512-roZmm4MYfuGN65PiagPvhumBb3Da1FAgyj6Ti2sHwQDIxhi40PMq5V90gBSKXl7qXbaXHrtpuAtG5R+XkqpDYA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-"react-dom-18@npm:react-dom@18":
+"react-dom-18@npm:react-dom@18.0.0-alpha-e6be2d531":
   version "18.0.0-alpha-e6be2d531"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-e6be2d531.tgz#89b1aef488a56ceac7cc0169ae02d7fbb58cbbb6"
   integrity sha512-mMGiX/kyhxaUTRDt+Q5oIbpU6cPvO8Sp/kHz3cdNFviwVTHHF2YrnnD70BD2F1R0b7wAdfVVit9EfE+Rqt0sJA==