Adopt react 18 rc1

package.json

@@ -144,9 +144,9 @@
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
     "react": "17.0.2",
-    "react-18": "npm:react@18.0.0-rc.0",
+    "react-18": "npm:react@18.0.0-rc.1",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:react-dom@18.0.0-rc.0",
+    "react-dom-18": "npm:react-dom@18.0.0-rc.1",
     "react-ssr-prepass": "1.0.8",
     "relay-compiler": "13.0.2",
     "relay-runtime": "13.0.2",

packages/next/build/webpack/loaders/next-flight-server-loader.ts

@@ -81,6 +81,7 @@ async function parseImportsInfo({
             // Since we already include React in the SSR runtime,
             // here we can't create a new module with the ?__rsc_server__ query.
             if (
+              importSource === 'react' ||
               ['react/jsx-runtime', 'react/jsx-dev-runtime'].includes(
                 importSource
               )

packages/next/client/index.tsx

@@ -542,9 +542,10 @@ function renderReactElement(
 
   const reactEl = fn(shouldHydrate ? markHydrateComplete : markRenderComplete)
   if (process.env.__NEXT_REACT_ROOT) {
+    const ReactDOMClient = require('react-dom/client')
     if (!reactRoot) {
       // Unlike with createRoot, you don't need a separate root.render() call here
-      reactRoot = (ReactDOM as any).hydrateRoot(domEl, reactEl)
+      reactRoot = (ReactDOMClient as any).hydrateRoot(domEl, reactEl)
       // TODO: Remove shouldHydrate variable when React 18 is stable as it can depend on `reactRoot` existing
       shouldHydrate = false
     } else {
@@ -807,13 +808,11 @@ if (process.env.__NEXT_RSC) {
 
     return (
       <RefreshContext.Provider value={refreshCache}>
-        <React.Suspense fallback={null}>
-          <ServerRoot
-            cacheKey={cacheKey}
-            serialized={__flight_serialized__}
-            _fresh={__flight_fresh__}
-          />
-        </React.Suspense>
+        <ServerRoot
+          cacheKey={cacheKey}
+          serialized={__flight_serialized__}
+          _fresh={__flight_fresh__}
+        />
       </RefreshContext.Provider>
     )
   }

packages/next/server/render.tsx

@@ -397,11 +397,7 @@ function createServerComponentRenderer(
   }
 
   const Component = (props: any) => {
-    return (
-      <React.Suspense fallback={null}>
-        <ServerComponentWrapper {...props} />
-      </React.Suspense>
-    )
+    return <ServerComponentWrapper {...props} />
   }
 
   // Although it's not allowed to attach some static methods to Component,
@@ -1758,7 +1754,7 @@ function renderToStream({
   generateStaticHTML: boolean
   flushEffectHandler?: () => Promise<string>
 }): Promise<ReadableStream<Uint8Array>> {
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
     let resolved = false
 
     const closeTag = '</body></html>'
@@ -1793,7 +1789,7 @@ function renderToStream({
       }
     }
 
-    const renderStream: ReadableStream<Uint8Array> = (
+    const renderStream: ReadableStream<Uint8Array> = await (
       ReactDOMServer as any
     ).renderToReadableStream(element, {
       onError(err: Error) {
@@ -1802,15 +1798,9 @@ function renderToStream({
           reject(err)
         }
       },
-      onCompleteShell() {
-        if (!generateStaticHTML) {
-          doResolve()
-        }
-      },
-      onCompleteAll() {
-        doResolve()
-      },
     })
+
+    doResolve()
   })
 }
 

test/integration/react-18/test/with-react-18.js

@@ -1,13 +1,10 @@
 module.exports = function withReact18(config) {
   config.webpack = (webpackConfig) => {
     const { alias } = webpackConfig.resolve
-    // FIXME: resolving react/jsx-runtime https://github.com/facebook/react/issues/20235
-    alias['react/jsx-dev-runtime'] = 'react/jsx-dev-runtime.js'
-    alias['react/jsx-runtime'] = 'react/jsx-runtime.js'
-
     // Use react 18
     alias['react'] = 'react-18'
     alias['react-dom'] = 'react-dom-18'
+    alias['react-dom/client'] = 'react-dom-18/client'
     alias['react-dom/server'] = 'react-dom-18/server'
     alias['react-dom/server.browser'] = 'react-dom-18/server.browser'
 

test/integration/react-streaming-and-server-components/app/next.config.js

@@ -1,7 +1,6 @@
 const withReact18 = require('../../react-18/test/with-react-18')
 
 module.exports = withReact18({
-  trailingSlash: true,
   reactStrictMode: true,
   onDemandEntries: {
     maxInactiveAge: 1000 * 60 * 60,

test/integration/react-streaming-and-server-components/test/rsc.js

@@ -77,10 +77,7 @@ export default function (context, { runtime, env }) {
 
   it('should support next/link in server components', async () => {
     const linkHTML = await renderViaHTTP(context.appPort, '/next-api/link')
-    const linkText = getNodeBySelector(
-      linkHTML,
-      'div[hidden] > a[href="/"]'
-    ).text()
+    const linkText = getNodeBySelector(linkHTML, '#__next > a[href="/"]').text()
 
     expect(linkText).toContain('go home')
 
@@ -114,7 +111,7 @@ export default function (context, { runtime, env }) {
       const imageHTML = await renderViaHTTP(context.appPort, '/next-api/image')
       const imageTag = getNodeBySelector(
         imageHTML,
-        'div[hidden] > span > span > img'
+        '#__next > span > span > img'
       )
 
       expect(imageTag.attr('src')).toContain('data:image')
@@ -176,13 +173,13 @@ export default function (context, { runtime, env }) {
     expect(
       getNodeBySelector(
         clientExportsHTML,
-        'div[hidden] > div > #named-exports'
+        '#__next > div > #named-exports'
       ).text()
     ).toBe('abcde')
     expect(
       getNodeBySelector(
         clientExportsHTML,
-        'div[hidden] > div > #default-exports-arrow'
+        '#__next > div > #default-exports-arrow'
       ).text()
     ).toBe('client-default-export-arrow')
 

yarn.lock

@@ -17527,22 +17527,20 @@ 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.0.0-rc.0":
-  version "18.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-rc.0.tgz#60bfcf1edd0b35fbeeeca852515c6cc2ce06a6eb"
-  integrity sha512-PawosMBgF8k5Nlc3++ibzjFqPvo1XKv80MNtVYqz3abHHB2w3IpU65sSdSmBd2ooCwVhcp9b1vkx/twqhakNtA==
+"react-18@npm:react@18.0.0-rc.1":
+  version "18.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-rc.1.tgz#fbaef1cbf8b1eddb36a869ee1ea723044aa670c2"
+  integrity sha512-IdvjOtyeFhITZwDrj+GMvY7kbWnGklRzNByO7/pOVIt0o3VZi++BUybpK3Fen1gDPkOZDP/rag7lSh6RZuWOeQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
-"react-dom-18@npm:react-dom@18.0.0-rc.0":
-  version "18.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-rc.0.tgz#aa07044bdd6399ff94c664b2985e2e25948fbf3e"
-  integrity sha512-tdD1n0svTndHBQvVAq/f2Kx7FgQ30CpSLp87/neQKAHPW5WtdgW1sBSwmFAcMQOrmstTuP0M+zRlH86f9kMX/A==
+"react-dom-18@npm:react-dom@18.0.0-rc.1":
+  version "18.0.0-rc.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-rc.1.tgz#97296d5a5e7582e65ea0d82a9ccd5953aa05e7f6"
+  integrity sha512-BZ9NEwUp56MEguEwAzuh3u4bYE9Jv3QrzjaTmu11PV4C/lJCARTELEI16vjnHLq184GoJcCHMBrDILqlCrkZFQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.21.0-rc.0"
+    scheduler "^0.21.0-rc.1"
 
 react-dom@17.0.2:
   version "17.0.2"
@@ -18543,13 +18541,12 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.21.0-rc.0:
-  version "0.21.0-rc.0-next-f2a59df48-20211208"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-rc.0-next-f2a59df48-20211208.tgz#54e18e1d360194fd54b47a00616e46403fcabdf1"
-  integrity sha512-x0oLd3YIih9GHqWTaFYejVe6Au+4TadOWZciAq8m4+Fuo5qCi4/3M35a9irVSIP3+qcg/fCqHKJETT9G0ejD1A==
+scheduler@^0.21.0-rc.1:
+  version "0.21.0-rc.1-next-f468816ef-20220225"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-rc.1-next-f468816ef-20220225.tgz#1909b9ce9e67de48f5ca06b52d98828401771e66"
+  integrity sha512-/maKldJ78Ba2o1e9kh2mUpqNZH7XrmSQ1o1aa3HUPN/OMotUB9+pBKX/y3Zihkjco21H4cujG9hK2sJOZUpzJw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 "schema-utils2@npm:schema-utils@2.7.1":
   version "2.7.1"