Disable using prebundled of react for appDir

package.json

@@ -39,6 +39,7 @@
     "lint-staged": "lint-staged",
     "next-with-deps": "./scripts/next-with-deps.sh",
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
+    "next-react-exp": "__NEXT_REACT_CHANNEL=exp node --trace-deprecation --enable-source-maps -r ./test/lib/react-channel-require-hook.js packages/next/dist/bin/next",
     "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next",
     "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic",
     "debug": "node --inspect packages/next/dist/bin/next",
@@ -180,6 +181,9 @@
     "react-17": "npm:react@17.0.2",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
+    "react-exp": "npm:react@0.0.0-experimental-9cdf8a99e-20221018",
+    "react-dom-exp": "npm:react-dom@0.0.0-experimental-9cdf8a99e-20221018",
+    "react-server-dom-webpack": "0.0.0-experimental-9cdf8a99e-20221018",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

packages/next/build/index.ts

@@ -303,7 +303,7 @@ export default async function build(
       const publicDir = path.join(dir, 'public')
       const isAppDirEnabled = !!config.experimental.appDir
       if (isAppDirEnabled) {
-        process.env.HAS_APP_DIR = '1'
+        process.env.NEXT_PREBUNDLED_REACT = '1'
       }
       const { pagesDir, appDir } = findPagesDir(dir, isAppDirEnabled)
 

packages/next/build/utils.ts

@@ -54,7 +54,7 @@ import {
 } from './webpack/require-hook'
 
 loadRequireHook()
-if (process.env.HAS_APP_DIR) {
+if (process.env.NEXT_PREBUNDLED_REACT) {
   overrideBuiltInReactPackages()
 }
 

packages/next/build/webpack-config.ts

@@ -832,6 +832,9 @@ export default async function getBaseWebpackConfig(
     [COMPILER_NAMES.edgeServer]: ['browser', 'module', 'main'],
   }
 
+  const reactDir = path.dirname(require.resolve('react/package.json'))
+  const reactDomDir = path.dirname(require.resolve('react-dom/package.json'))
+
   const resolveConfig = {
     // Disable .mjs for node_modules bundling
     extensions: isNodeServer
@@ -870,19 +873,25 @@ export default async function getBaseWebpackConfig(
 
       next: NEXT_PROJECT_ROOT,
 
-      ...(hasServerComponents
-        ? {
-            // 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',
-          }
-        : undefined),
+      // Disable until pre-bundling is landed
+      // ...(hasServerComponents
+      //   ? {
+      //       // 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',
+      //     }
+      //   : undefined),
+      react: reactDir,
+      'react-dom$': reactDomDir,
+      'react-dom/server$': `${reactDomDir}/server`,
+      'react-dom/server.browser$': `${reactDomDir}/server.browser`,
+      'react-dom/client$': `${reactDomDir}/client`,
 
       'styled-jsx/style$': require.resolve(`styled-jsx/style`),
       'styled-jsx$': require.resolve(`styled-jsx`),
@@ -1183,12 +1192,7 @@ export default async function getBaseWebpackConfig(
       if (layer === WEBPACK_LAYERS.server) {
         // All packages should be bundled for the server layer if they're not opted out.
         // This option takes priority over the transpilePackages option.
-        if (
-          isResourceInPackages(
-            res,
-            config.experimental.serverComponentsExternalPackages
-          )
-        ) {
+        if (isResourceInPackages(res, optoutBundlingPackages)) {
           return `${externalType} ${request}`
         }
 
@@ -1541,6 +1545,46 @@ export default async function getBaseWebpackConfig(
     },
     module: {
       rules: [
+        ...(hasAppDir && !isClient && !isEdgeServer
+          ? [
+              {
+                issuerLayer: WEBPACK_LAYERS.server,
+                test: (req: string) => {
+                  // If it's not a source code file, or has been opted out of
+                  // bundling, don't resolve it.
+                  if (
+                    !codeCondition.test.test(req) ||
+                    isResourceInPackages(
+                      req,
+                      config.experimental.serverComponentsExternalPackages
+                    )
+                  ) {
+                    return false
+                  }
+
+                  return true
+                },
+                resolve: process.env.__NEXT_REACT_CHANNEL
+                  ? {
+                      conditionNames: ['react-server', 'node', 'require'],
+                      alias: {
+                        react: `react-${process.env.__NEXT_REACT_CHANNEL}`,
+                        'react-dom': `react-dom-${process.env.__NEXT_REACT_CHANNEL}`,
+                      },
+                    }
+                  : {
+                      conditionNames: ['react-server', 'node', 'require'],
+                      alias: {
+                        // 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: 'react',
+                        'react-dom': 'react-dom',
+                      },
+                    },
+              },
+            ]
+          : []),
         // TODO: FIXME: do NOT webpack 5 support with this
         // x-ref: https://github.com/webpack/webpack/issues/11467
         ...(!config.experimental.fullySpecified
@@ -1564,35 +1608,7 @@ export default async function getBaseWebpackConfig(
               },
             ]
           : []),
-        ...(hasAppDir && !isClient
-          ? [
-              {
-                issuerLayer: WEBPACK_LAYERS.server,
-                test: (req: string) => {
-                  // If it's not a source code file, or has been opted out of
-                  // bundling, don't resolve it.
-                  if (
-                    !codeCondition.test.test(req) ||
-                    isResourceInPackages(req, optoutBundlingPackages)
-                  ) {
-                    return false
-                  }
 
-                  return true
-                },
-                resolve: {
-                  conditionNames: ['react-server', 'node', 'require'],
-                  alias: {
-                    // 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: 'react',
-                    'react-dom': 'react-dom',
-                  },
-                },
-              },
-            ]
-          : []),
         ...(hasServerComponents && !isClient
           ? [
               // RSC server compilation loaders
@@ -1629,6 +1645,7 @@ export default async function getBaseWebpackConfig(
                 // Alias react-dom for ReactDOM.preload usage.
                 // Alias react for switching between default set and share subset.
                 oneOf: [
+                  /*
                   {
                     // test: codeCondition.test,
                     issuerLayer: WEBPACK_LAYERS.server,
@@ -1647,28 +1664,34 @@ export default async function getBaseWebpackConfig(
                     resolve: {
                       // It needs `conditionNames` here to require the proper asset,
                       // when react is acting as dependency of compiled/react-dom.
+                      conditionNames: ['react-server', 'node', 'require'],
                       alias: {
-                        react: 'next/dist/compiled/react/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',
-                      },
-                    },
-                  },
-                  {
-                    test: codeCondition.test,
-                    resolve: {
-                      alias: {
-                        react: 'next/dist/compiled/react',
-                        'react-dom$': isClient
-                          ? 'next/dist/compiled/react-dom/index'
-                          : 'next/dist/compiled/react-dom/server-rendering-stub',
-                        'react-dom/client$':
-                          'next/dist/compiled/react-dom/client',
+                        react: 'react',
+                        'react-dom': 'react-dom',
+                        // Disable before prebundling is landed
+                        // react: 'next/dist/compiled/react/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',
                       },
                     },
                   },
+                  */
+                  // Disable before prebundling is landed
+                  // {
+                  //   test: codeCondition.test,
+                  //   resolve: {
+                  //     alias: {
+                  //       react: 'next/dist/compiled/react',
+                  //       'react-dom$': isClient
+                  //         ? 'next/dist/compiled/react-dom/index'
+                  //         : 'next/dist/compiled/react-dom/server-rendering-stub',
+                  //       'react-dom/client$':
+                  //         'next/dist/compiled/react-dom/client',
+                  //     },
+                  //   },
+                  // },
                 ],
               },
             ]

packages/next/build/webpack/require-hook.ts

@@ -45,6 +45,7 @@ export function loadRequireHook(aliases: [string, string][] = []) {
 }
 
 export function overrideBuiltInReactPackages() {
+  /*
   setRequireOverrides([
     ['react', require.resolve('next/dist/compiled/react')],
     [
@@ -72,4 +73,5 @@ export function overrideBuiltInReactPackages() {
       require.resolve('next/dist/compiled/react-dom/server.browser'),
     ],
   ])
+  */
 }