Re-land "Vendor react@experimental under an experimentalReact fla…

…g" (#48041) Reverts #48038 fix NEXT-926 --- The root cause was that when copying the package.json, I removed all fields except for a few (such as `exports`) but missed the `browser` field. That caused the client bundle to resolve to the Node.js version of React DOM, and then we had the `async_hooks` error. Added it back in 99c9b9e. I reproduced the error with next-site earlier and confirmed that this fix is good.
vercel · Apr 8, 2023 · 9c0e520 · 9c0e520
1 parent 2bcdfbb
commit 9c0e520
Show file tree

Hide file tree

Showing 147 changed files with 180,634 additions and 4,214 deletions.
diff --git a/package.json b/package.json
@@ -197,11 +197,13 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:react@17.0.2",
-    "react-builtin": "npm:react@18.3.0-next-85de6fde5-20230328",
+    "react-builtin": "npm:react@18.3.0-next-b14f8da15-20230403",
+    "react-experimental-builtin": "npm:react@0.0.0-experimental-b14f8da15-20230403",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "react-dom-builtin": "npm:react-dom@18.3.0-next-85de6fde5-20230328",
-    "react-server-dom-webpack": "18.3.0-next-85de6fde5-20230328",
+    "react-dom-builtin": "npm:react-dom@18.3.0-next-b14f8da15-20230403",
+    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-b14f8da15-20230403",
+    "react-server-dom-webpack": "18.3.0-next-b14f8da15-20230403",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -212,6 +214,8 @@
     "rimraf": "3.0.2",
     "sass": "1.54.0",
     "satori": "0.4.4",
+    "scheduler-builtin": "npm:scheduler@0.24.0-next-b14f8da15-20230403",
+    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-b14f8da15-20230403",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",

diff --git a/packages/next/src/build/index.ts b/packages/next/src/build/index.ts
@@ -280,6 +280,7 @@ export default async function build(
 
       const publicDir = path.join(dir, 'public')
       const isAppDirEnabled = !!config.experimental.appDir
+      const useExperimentalReact = !!config.experimental.experimentalReact
       const initialRequireHookFilePath = require.resolve(
         'next/dist/server/initialize-require-hook'
       )
@@ -289,7 +290,9 @@ export default async function build(
       )
 
       if (isAppDirEnabled) {
-        process.env.NEXT_PREBUNDLED_REACT = '1'
+        process.env.NEXT_PREBUNDLED_REACT = useExperimentalReact
+          ? 'experimental'
+          : 'next'
       }
       await promises
         .writeFile(

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -683,15 +683,22 @@ export default async function getBaseWebpackConfig(
 
   const hasAppDir = !!config.experimental.appDir && !!appDir
   const hasServerComponents = hasAppDir
+  const useExperimentalReact = !!config.experimental.experimentalReact
   const disableOptimizedLoading = true
   const enableTypedRoutes = !!config.experimental.typedRoutes && hasAppDir
+  const builtInReactChannel = useExperimentalReact ? '-experimental' : ''
 
   if (isClient) {
     if (isEdgeRuntime(config.experimental.runtime)) {
       Log.warn(
         'You are using `experimental.runtime` which was removed. Check https://nextjs.org/docs/api-routes/edge-api-routes on how to use edge runtime.'
       )
     }
+    if (useExperimentalReact && !hasAppDir) {
+      Log.warn(
+        'You are using `experimental.experimentalReact` which requires `experimental.appDir` to be enabled.'
+      )
+    }
   }
 
   const babelConfigFile = await getBabelConfigFile(dir)
@@ -1025,13 +1032,11 @@ export default async function getBaseWebpackConfig(
         ? {
             // For react and react-dom, alias them dynamically for server layer
             // and others in the loaders configuration
-            'react-dom/client$': 'next/dist/compiled/react-dom/client',
-            'react-dom/server$': 'next/dist/compiled/react-dom/server',
-            'react-dom/server.browser$':
-              'next/dist/compiled/react-dom/server.browser',
-            'react/jsx-dev-runtime$':
-              'next/dist/compiled/react/jsx-dev-runtime',
-            'react/jsx-runtime$': 'next/dist/compiled/react/jsx-runtime',
+            'react-dom/client$': `next/dist/compiled/react-dom${builtInReactChannel}/client`,
+            'react-dom/server$': `next/dist/compiled/react-dom${builtInReactChannel}/server`,
+            'react-dom/server.browser$': `next/dist/compiled/react-dom${builtInReactChannel}/server.browser`,
+            'react/jsx-dev-runtime$': `next/dist/compiled/react${builtInReactChannel}/jsx-dev-runtime`,
+            'react/jsx-runtime$': `next/dist/compiled/react${builtInReactChannel}/jsx-runtime`,
           }
         : {
             react: reactDir,
@@ -1233,11 +1238,17 @@ export default async function getBaseWebpackConfig(
 
       if (/^(react(?:$|\/)|react-dom(?:$|\/))/.test(request)) {
         // override react-dom to server-rendering-stub for server
+        const channel = useExperimentalReact ? '-experimental' : ''
         if (
           request === 'react-dom' &&
           (layer === WEBPACK_LAYERS.client || layer === WEBPACK_LAYERS.server)
         ) {
-          request = 'react-dom/server-rendering-stub'
+          request = `react-dom${channel}/server-rendering-stub`
+        } else {
+          // `react` -> `react-experimental`
+          // `react-dom` -> `react-dom-experimental`
+          // `react/jsx-runtime` -> `react-experimental/jsx-runtime`
+          request = request.replace(/^(react|react-dom)/, (m) => m + channel)
         }
         return `commonjs ${hasAppDir ? 'next/dist/compiled/' : ''}${request}`
       }
@@ -1766,9 +1777,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${builtInReactChannel}/react.shared-subset`,
+                    'react-dom$': `next/dist/compiled/react-dom${builtInReactChannel}/server-rendering-stub`,
                   },
                 },
                 use: {
@@ -1854,11 +1864,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${builtInReactChannel}/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${builtInReactChannel}/server-rendering-stub`,
                       },
                     },
                   },
@@ -1867,22 +1876,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${builtInReactChannel}`,
+                        'react-dom$': `next/dist/compiled/react-dom${builtInReactChannel}/server-rendering-stub`,
                       },
                     },
                   },
                   {
                     test: codeCondition.test,
                     resolve: {
                       alias: {
-                        react: 'next/dist/compiled/react',
+                        react: `next/dist/compiled/react${builtInReactChannel}`,
                         '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${builtInReactChannel}/cjs/react-dom.profiling.min`
+                          : `next/dist/compiled/react-dom${builtInReactChannel}`,
+                        'react-dom/client$': `next/dist/compiled/react-dom${builtInReactChannel}/client`,
                       },
                     },
                   },

diff --git a/packages/next/src/build/webpack/require-hook.ts b/packages/next/src/build/webpack/require-hook.ts
@@ -48,31 +48,35 @@ export function loadRequireHook(aliases: [string, string][] = []) {
 }
 
 export function overrideBuiltInReactPackages() {
+  const channel =
+    process.env.NEXT_PREBUNDLED_REACT === 'experimental' ? '-experimental' : ''
   setRequireOverrides([
-    ['react', require.resolve('next/dist/compiled/react')],
+    ['react', require.resolve(`next/dist/compiled/react${channel}`)],
     [
       'react/jsx-runtime',
-      require.resolve('next/dist/compiled/react/jsx-runtime'),
+      require.resolve(`next/dist/compiled/react${channel}/jsx-runtime`),
     ],
     [
       'react/jsx-dev-runtime',
-      require.resolve('next/dist/compiled/react/jsx-dev-runtime'),
+      require.resolve(`next/dist/compiled/react${channel}/jsx-dev-runtime`),
     ],
     [
       'react-dom',
-      require.resolve('next/dist/compiled/react-dom/server-rendering-stub'),
+      require.resolve(
+        `next/dist/compiled/react-dom${channel}/server-rendering-stub`
+      ),
     ],
     [
       'react-dom/client',
-      require.resolve('next/dist/compiled/react-dom/client'),
+      require.resolve(`next/dist/compiled/react-dom${channel}/client`),
     ],
     [
       'react-dom/server',
-      require.resolve('next/dist/compiled/react-dom/server'),
+      require.resolve(`next/dist/compiled/react-dom${channel}/server`),
     ],
     [
       'react-dom/server.browser',
-      require.resolve('next/dist/compiled/react-dom/server.browser'),
+      require.resolve(`next/dist/compiled/react-dom${channel}/server.browser`),
     ],
   ])
 }
diff --git a/packages/next/src/compiled/react-dom-experimental/LICENSE b/packages/next/src/compiled/react-dom-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.