Add flag to switch to the experimental channel

package.json

@@ -204,6 +204,7 @@
     "react-dom-builtin": "npm:react-dom@18.3.0-next-6eadbe0c4-20230425",
     "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-6eadbe0c4-20230425",
     "react-server-dom-webpack": "18.3.0-next-6eadbe0c4-20230425",
+    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-6eadbe0c4-20230425",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

packages/next-swc/crates/next-core/src/next_import_map.rs

@@ -97,6 +97,10 @@ pub async fn get_next_client_import_map(
                 "react-dom/",
                 request_to_import_mapping(app_dir, "next/dist/compiled/react-dom/*"),
             );
+            import_map.insert_wildcard_alias(
+                "react-server-dom-webpack/",
+                request_to_import_mapping(app_dir, "next/dist/compiled/react-server-dom-webpack/*"),
+            );
         }
         ClientContextType::Fallback => {}
         ClientContextType::Other => {}
@@ -210,6 +214,7 @@ pub async fn get_next_server_import_map(
             import_map.insert_wildcard_alias("react-dom/", external);
             import_map.insert_exact_alias("styled-jsx", external);
             import_map.insert_wildcard_alias("styled-jsx/", external);
+            import_map.insert_exact_alias("react-server-dom-webpack/", external);
         }
         ServerContextType::AppSSR { .. }
         | ServerContextType::AppRSC { .. }
@@ -382,6 +387,10 @@ pub async fn insert_next_server_special_aliases(
                 "react-dom/",
                 request_to_import_mapping(app_dir, "next/dist/compiled/react-dom/*"),
             );
+            import_map.insert_wildcard_alias(
+                "react-server-dom-webpack/",
+                request_to_import_mapping(app_dir, "next/dist/compiled/react-server-dom-webpack/*"),
+            );
         }
         ServerContextType::Middleware => {}
     }

packages/next/src/build/index.ts

@@ -1141,8 +1141,12 @@ export default async function build(
           forkOptions: {
             env: {
               ...process.env,
-              NEXT_PREBUNDLED_REACT_WORKER: type === 'app' ? '1' : '',
-              __NEXT_PRIVATE_PREBUNDLED_REACT: type === 'app' ? '1' : '',
+              __NEXT_PRIVATE_PREBUNDLED_REACT:
+                type === 'app'
+                  ? config.experimental.experimentalReact
+                    ? 'experimental'
+                    : 'next'
+                  : '',
             },
           },
           enableWorkerThreads: config.experimental.workerThreads,

packages/next/src/build/utils.ts

@@ -1955,7 +1955,7 @@ ${
   // to ensure the correctness of the version for app.
   `\
 if (nextConfig && nextConfig.experimental && nextConfig.experimental.appDir) {
-  process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = '1'
+  process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = nextConfig.experimental.experimentalReact ? 'experimental' : 'next'
 }
 `
 }

packages/next/src/build/webpack-config.ts

@@ -86,7 +86,7 @@ const babelIncludeRegexes: RegExp[] = [
   /[\\/](strip-ansi|ansi-regex|styled-jsx)[\\/]/,
 ]
 
-const reactPackagesRegex = /^(react(?:$|\/)|react-dom(?:$|\/))/
+const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 
 const staticGenerationAsyncStorageRegex =
   /next[\\/]dist[\\/]client[\\/]components[\\/]static-generation-async-storage/
@@ -704,6 +704,8 @@ export default async function getBaseWebpackConfig(
   const hasServerComponents = hasAppDir
   const disableOptimizedLoading = true
   const enableTypedRoutes = !!config.experimental.typedRoutes && hasAppDir
+  const experimentalReact = !!config.experimental.experimentalReact && hasAppDir
+  const bundledReactChannel = experimentalReact ? '-experimental' : ''
 
   if (isClient) {
     if (
@@ -1228,7 +1230,10 @@ export default async function getBaseWebpackConfig(
       request === 'react/jsx-runtime'
     ) {
       if (isAppLayer) {
-        return `commonjs next/dist/compiled/${request}`
+        return `commonjs next/dist/compiled/${request.replace(
+          'react',
+          'react' + bundledReactChannel
+        )}`
       }
       return
     }
@@ -1237,10 +1242,7 @@ export default async function getBaseWebpackConfig(
     if (layer === WEBPACK_LAYERS.server) {
       // React needs to be bundled for Server Components so the special
       // `react-server` export condition can be used.
-      if (
-        reactPackagesRegex.test(request) ||
-        request === 'next/dist/compiled/react-server-dom-webpack/server.edge'
-      ) {
+      if (reactPackagesRegex.test(request)) {
         return
       }
     }
@@ -1254,17 +1256,26 @@ export default async function getBaseWebpackConfig(
         return `commonjs ${request}`
       }
 
-      if (/^(react(?:$|\/)|react-dom(?:$|\/))/.test(request)) {
+      if (reactPackagesRegex.test(request)) {
         // override react-dom to server-rendering-stub for server
         if (
           request === 'react-dom' &&
           (layer === WEBPACK_LAYERS.client ||
             layer === WEBPACK_LAYERS.server ||
             layer === WEBPACK_LAYERS.action)
         ) {
-          request = 'react-dom/server-rendering-stub'
+          request = `next/dist/compiled/react-dom${bundledReactChannel}/server-rendering-stub`
+        } else if (isAppLayer) {
+          request =
+            'next/dist/compiled/' +
+            request.replace(
+              /^(react-server-dom-webpack|react-dom|react)/,
+              (name) => {
+                return name + bundledReactChannel
+              }
+            )
         }
-        return `commonjs ${isAppLayer ? 'next/dist/compiled/' : ''}${request}`
+        return `commonjs ${request}`
       }
 
       const notExternalModules =
@@ -1441,7 +1452,12 @@ export default async function getBaseWebpackConfig(
       // also map react to builtin ones with require-hook.
       if (layer === WEBPACK_LAYERS.client) {
         if (reactPackagesRegex.test(request)) {
-          return `commonjs next/dist/compiled/${request}`
+          return `commonjs next/dist/compiled/${request.replace(
+            /^(react-server-dom-webpack|react-dom|react)/,
+            (name) => {
+              return name + bundledReactChannel
+            }
+          )}`
         }
         return
       }
@@ -1781,7 +1797,7 @@ export default async function getBaseWebpackConfig(
         ...(hasAppDir
           ? [
               {
-                test: codeCondition.test,
+                // All app dir layers need to use this configured resolution logic
                 issuerLayer: {
                   or: [
                     WEBPACK_LAYERS.server,
@@ -1801,10 +1817,13 @@ export default async function getBaseWebpackConfig(
                     [require.resolve('next/dynamic')]: require.resolve(
                       'next/dist/shared/lib/app-dynamic'
                     ),
-                    'react/jsx-runtime$':
-                      'next/dist/compiled/react/jsx-runtime',
-                    'react/jsx-dev-runtime$':
-                      'next/dist/compiled/react/jsx-dev-runtime',
+                    'react/jsx-runtime$': `next/dist/compiled/react${bundledReactChannel}/jsx-runtime`,
+                    'react/jsx-dev-runtime$': `next/dist/compiled/react${bundledReactChannel}/jsx-dev-runtime`,
+                    'react-dom/server.edge$': `next/dist/compiled/react-dom${bundledReactChannel}/server.edge`,
+                    'react-server-dom-webpack/client$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/client`,
+                    'react-server-dom-webpack/client.edge$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/client.edge`,
+                    'react-server-dom-webpack/server.edge$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/server.edge`,
+                    'react-server-dom-webpack/server.node$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/server.node`,
                   },
                 },
               },
@@ -1835,9 +1854,8 @@ export default async function getBaseWebpackConfig(
                     // If missing the alias override here, the default alias will be used which aliases
                     // react to the direct file path, not the package name. In that case the condition
                     // will be ignored completely.
-                    react: 'next/dist/compiled/react/react.shared-subset',
-                    'react-dom$':
-                      'next/dist/compiled/react-dom/server-rendering-stub',
+                    react: `next/dist/compiled/react${bundledReactChannel}/react.shared-subset`,
+                    'react-dom$': `next/dist/compiled/react-dom${bundledReactChannel}/server-rendering-stub`,
                   },
                 },
                 use: {
@@ -1900,11 +1918,10 @@ export default async function getBaseWebpackConfig(
                       // It needs `conditionNames` here to require the proper asset,
                       // when react is acting as dependency of compiled/react-dom.
                       alias: {
-                        react: 'next/dist/compiled/react/react.shared-subset',
+                        react: `next/dist/compiled/react${bundledReactChannel}/react.shared-subset`,
                         // Use server rendering stub for RSC
                         // x-ref: https://github.com/facebook/react/pull/25436
-                        'react-dom$':
-                          'next/dist/compiled/react-dom/server-rendering-stub',
+                        'react-dom$': `next/dist/compiled/react-dom${bundledReactChannel}/server-rendering-stub`,
                       },
                     },
                   },
@@ -1913,22 +1930,20 @@ export default async function getBaseWebpackConfig(
                     test: codeCondition.test,
                     resolve: {
                       alias: {
-                        react: 'next/dist/compiled/react',
-                        'react-dom$':
-                          'next/dist/compiled/react-dom/server-rendering-stub',
+                        react: `next/dist/compiled/react${bundledReactChannel}`,
+                        'react-dom$': `next/dist/compiled/react-dom${bundledReactChannel}/server-rendering-stub`,
                       },
                     },
                   },
                   {
                     test: codeCondition.test,
                     resolve: {
                       alias: {
-                        react: 'next/dist/compiled/react',
+                        react: `next/dist/compiled/react${bundledReactChannel}`,
                         'react-dom$': reactProductionProfiling
-                          ? 'next/dist/compiled/react-dom/cjs/react-dom.profiling.min'
-                          : 'next/dist/compiled/react-dom',
-                        'react-dom/client$':
-                          'next/dist/compiled/react-dom/client',
+                          ? `next/dist/compiled/react-dom${bundledReactChannel}/cjs/react-dom.profiling.min`
+                          : `next/dist/compiled/react-dom${bundledReactChannel}`,
+                        'react-dom/client$': `next/dist/compiled/react-dom${bundledReactChannel}/client`,
                       },
                     },
                   },
@@ -2292,7 +2307,7 @@ export default async function getBaseWebpackConfig(
               appDir,
               dev,
               isEdgeServer,
-              useExperimentalReact: false,
+              useExperimentalReact: experimentalReact,
             })),
       hasAppDir &&
         !isClient &&

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -592,7 +592,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
 
     export * as serverHooks from 'next/dist/client/components/hooks-server-context'
 
-    export { renderToReadableStream, decodeReply } from 'next/dist/compiled/react-server-dom-webpack/server.edge'
+    export { renderToReadableStream, decodeReply } from 'react-server-dom-webpack/server.edge'
     export const __next_app_webpack_require__ = __webpack_require__
     export { preloadStyle, preloadFont, preconnect } from 'next/dist/server/app-render/rsc/preloads'
   `

packages/next/src/build/webpack/loaders/next-flight-loader/action-client-wrapper.ts

@@ -1,6 +1,8 @@
-// This file must be bundled in the app's client layer.
+// This file must be bundled in the app's client layer, it shouldn't be directly
+// imported by the server.
 
-import { createServerReference } from 'next/dist/compiled/react-server-dom-webpack/client'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createServerReference } from 'react-server-dom-webpack/client'
 import { callServer } from 'next/dist/client/app-call-server'
 
 // A noop wrapper to let the Flight client create the server reference.

packages/next/src/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts

@@ -12,6 +12,9 @@ const originModules = [
   require.resolve('../../../server/load-components'),
   require.resolve('../../../server/next-server'),
   require.resolve('../../../compiled/react-server-dom-webpack/client.edge'),
+  require.resolve(
+    '../../../compiled/react-server-dom-webpack-experimental/client.edge'
+  ),
 ]
 
 const RUNTIME_NAMES = ['webpack-runtime', 'webpack-api-runtime']
@@ -23,7 +26,7 @@ export function deleteAppClientCache() {
   // ensure we reset the cache for sc_server components
   // loaded via react-server-dom-webpack
   const reactServerDomModId = require.resolve(
-    'next/dist/compiled/react-server-dom-webpack/client.edge'
+    'react-server-dom-webpack/client.edge'
   )
   const reactServerDomMod = require.cache[reactServerDomModId]
 

packages/next/src/client/app-call-server.ts

@@ -1,4 +1,6 @@
-import { encodeReply } from 'next/dist/compiled/react-server-dom-webpack/client'
+// @ts-ignore
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { encodeReply } from 'react-server-dom-webpack/client'
 
 export async function callServer(id: string, args: any[]) {
   const actionId = id

packages/next/src/client/app-index.tsx

@@ -3,7 +3,9 @@ import '../build/polyfills/polyfill-module'
 // @ts-ignore react-dom/client exists when using React 18
 import ReactDOMClient from 'react-dom/client'
 import React, { use } from 'react'
-import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client'
+// @ts-ignore
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFromReadableStream } from 'react-server-dom-webpack/client'
 
 import { HeadManagerContext } from '../shared/lib/head-manager-context'
 import { GlobalLayoutRouterContext } from '../shared/lib/app-router-context'

packages/next/src/client/components/router-reducer/fetch-server-response.ts

@@ -1,6 +1,8 @@
 'use client'
 
-import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack/client'
+// @ts-ignore
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFromFetch } from 'react-server-dom-webpack/client'
 import type {
   FlightRouterState,
   FlightData,

packages/next/src/compiled/react-server-dom-webpack-experimental/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.