Ensure React Compiler only runs on first-party browser code (#65851)

- Ensure React Compiler runs on first-party code in Turbopack (Excludes node_modules, but also fully skips running Babel on node_modules) - Ensure React Compiler runs on first-party code in Webpack (Excludes node_modules, but also fully skips running Babel on node_modules) - Ensure React Compiler only runs on browser code -- Per React team recommendation, it only optimizes browser-facing code currently. - Ensure React Compiler runs on Pages Router in Webpack -- Was already the case for Turbopack.
vercel · May 16, 2024 · fc0778b · fc0778b
1 parent 84014c2
commit fc0778b
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 64 deletions.
diff --git a/packages/next/src/build/babel/loader/get-config.ts b/packages/next/src/build/babel/loader/get-config.ts
@@ -264,6 +264,28 @@ function getFreshConfig(
   filename: string,
   inputSourceMap?: object | null
 ) {
+  const hasReactCompiler = (() => {
+    if (
+      loaderOptions.reactCompilerPlugins &&
+      loaderOptions.reactCompilerPlugins.length === 0
+    ) {
+      return false
+    }
+
+    if (
+      loaderOptions.reactCompilerExclude &&
+      loaderOptions.reactCompilerExclude(filename)
+    ) {
+      return false
+    }
+
+    return true
+  })()
+
+  const reactCompilerPluginsIfEnabled = hasReactCompiler
+    ? loaderOptions.reactCompilerPlugins ?? []
+    : []
+
   let { isServer, pagesDir, srcDir, development } = loaderOptions
 
   let options = {
@@ -304,7 +326,7 @@ function getFreshConfig(
   if (loaderOptions.transformMode === 'standalone') {
     options.plugins = [
       '@babel/plugin-syntax-jsx',
-      ...(loaderOptions.plugins ?? []),
+      ...reactCompilerPluginsIfEnabled,
     ]
     options.presets = [
       [
@@ -314,7 +336,7 @@ function getFreshConfig(
     ]
     options.caller = baseCaller
   } else {
-    let { configFile, plugins, hasJsxRuntime } = loaderOptions
+    let { configFile, hasJsxRuntime } = loaderOptions
     let customConfig: any = configFile
       ? getCustomBabelConfig(configFile)
       : undefined
@@ -330,7 +352,7 @@ function getFreshConfig(
 
     options.plugins = [
       ...getPlugins(loaderOptions, cacheCharacteristics),
-      ...(plugins || []),
+      ...reactCompilerPluginsIfEnabled,
       ...(customConfig?.plugins || []),
     ]
 

diff --git a/packages/next/src/build/babel/loader/index.ts b/packages/next/src/build/babel/loader/index.ts
@@ -10,11 +10,15 @@ async function nextBabelLoader(
 ) {
   const filename = this.resourcePath
   const target = this.target
-  const loaderOptions = parentTrace
+  const loaderOptions: any = parentTrace
     .traceChild('get-options')
     // @ts-ignore TODO: remove ignore once webpack 5 types are used
     .traceFn(() => this.getOptions())
 
+  if (loaderOptions.exclude && loaderOptions.exclude(filename)) {
+    return [inputSource, inputSourceMap]
+  }
+
   const loaderSpanInner = parentTrace.traceChild('next-babel-turbo-transform')
   const { code: transformedSource, map: outputSourceMap } =
     loaderSpanInner.traceFn(() =>

diff --git a/packages/next/src/build/babel/loader/types.d.ts b/packages/next/src/build/babel/loader/types.d.ts
@@ -16,7 +16,8 @@ export interface NextBabelLoaderBaseOptions {
   development: boolean
 
   // Custom plugins to be added to the generated babel options.
-  plugins?: Array<any>
+  reactCompilerPlugins?: Array<any>
+  reactCompilerExclude?: (excludePath: string) => boolean
 }
 
 /**

diff --git a/packages/next/src/build/get-babel-loader-config.ts b/packages/next/src/build/get-babel-loader-config.ts
@@ -3,9 +3,10 @@ import type { ReactCompilerOptions } from '../server/config-shared'
 
 const getReactCompilerPlugins = (
   options: boolean | ReactCompilerOptions | undefined,
-  isDev: boolean
+  isDev: boolean,
+  isServer: boolean
 ) => {
-  if (!options) {
+  if (!options || isServer) {
     return undefined
   }
 
@@ -34,7 +35,8 @@ const getBabelLoader = (
   srcDir: string,
   dev: boolean,
   isClient: boolean,
-  reactCompilerOptions: boolean | ReactCompilerOptions | undefined
+  reactCompilerOptions: boolean | ReactCompilerOptions | undefined,
+  reactCompilerExclude: ((excludePath: string) => boolean) | undefined
 ) => {
   if (!useSWCLoader) {
     return {
@@ -50,7 +52,12 @@ const getBabelLoader = (
         development: dev,
         hasReactRefresh: dev && isClient,
         hasJsxRuntime: true,
-        plugins: getReactCompilerPlugins(reactCompilerOptions, dev),
+        reactCompilerPlugins: getReactCompilerPlugins(
+          reactCompilerOptions,
+          dev,
+          isServer
+        ),
+        reactCompilerExclude,
       },
     }
   }
@@ -67,20 +74,29 @@ const getBabelLoader = (
 const getReactCompilerLoader = (
   options: boolean | ReactCompilerOptions | undefined,
   cwd: string,
-  isDev: boolean
+  isDev: boolean,
+  isServer: boolean,
+  reactCompilerExclude: ((excludePath: string) => boolean) | undefined
 ) => {
-  if (!options) {
+  const reactCompilerPlugins = getReactCompilerPlugins(options, isDev, isServer)
+  if (!reactCompilerPlugins) {
     return undefined
   }
 
-  return {
+  const config: any = {
     loader: require.resolve('./babel/loader/index'),
     options: {
       transformMode: 'standalone',
       cwd,
-      plugins: getReactCompilerPlugins(options, isDev),
+      reactCompilerPlugins,
     },
   }
+
+  if (reactCompilerExclude) {
+    config.options.reactCompilerExclude = reactCompilerExclude
+  }
+
+  return config
 }
 
 export { getBabelLoader, getReactCompilerLoader }
diff --git a/packages/next/src/build/swc/index.ts b/packages/next/src/build/swc/index.ts
@@ -1170,14 +1170,18 @@ function bindingToApi(
 
         for (const key of ['*.ts', '*.js', '*.jsx', '*.tsx']) {
           nextConfig.experimental.turbo.rules[key] = {
-            foreign: false,
-            loaders: [
-              getReactCompilerLoader(
-                originalNextConfig.experimental.reactCompiler,
-                projectPath,
-                nextConfig.dev
-              ),
-            ],
+            browser: {
+              foreign: false,
+              loaders: [
+                getReactCompilerLoader(
+                  originalNextConfig.experimental.reactCompiler,
+                  projectPath,
+                  nextConfig.dev,
+                  false,
+                  undefined
+                ),
+              ],
+            },
           }
         }
       }

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -410,6 +410,29 @@ export default async function getBaseWebpackConfig(
     loggedIgnoredCompilerOptions = true
   }
 
+  const shouldIncludeExternalDirs =
+    config.experimental.externalDir || !!config.transpilePackages
+  const codeCondition = {
+    test: { or: [/\.(tsx|ts|js|cjs|mjs|jsx)$/, /__barrel_optimize__/] },
+    ...(shouldIncludeExternalDirs
+      ? // Allowing importing TS/TSX files from outside of the root dir.
+        {}
+      : { include: [dir, ...babelIncludeRegexes] }),
+    exclude: (excludePath: string) => {
+      if (babelIncludeRegexes.some((r) => r.test(excludePath))) {
+        return false
+      }
+
+      const shouldBeBundled = isResourceInPackages(
+        excludePath,
+        finalTranspilePackages
+      )
+      if (shouldBeBundled) return false
+
+      return excludePath.includes('node_modules')
+    },
+  }
+
   const babelLoader = getBabelLoader(
     useSWCLoader,
     babelConfigFile,
@@ -420,12 +443,19 @@ export default async function getBaseWebpackConfig(
     (appDir || pagesDir)!,
     dev,
     isClient,
-    config.experimental?.reactCompiler
+    config.experimental?.reactCompiler,
+    codeCondition.exclude
   )
 
   const reactCompilerLoader = babelLoader
     ? undefined
-    : getReactCompilerLoader(config.experimental?.reactCompiler, dir, dev)
+    : getReactCompilerLoader(
+        config.experimental?.reactCompiler,
+        dir,
+        dev,
+        isNodeOrEdgeCompilation,
+        codeCondition.exclude
+      )
 
   let swcTraceProfilingInitialized = false
   const getSwcLoader = (extraOptions: Partial<SWCLoaderOptions>) => {
@@ -819,30 +849,7 @@ export default async function getBaseWebpackConfig(
     dir,
   })
 
-  const shouldIncludeExternalDirs =
-    config.experimental.externalDir || !!config.transpilePackages
-
   const pageExtensionsRegex = new RegExp(`\\.(${pageExtensions.join('|')})$`)
-  const codeCondition = {
-    test: { or: [/\.(tsx|ts|js|cjs|mjs|jsx)$/, /__barrel_optimize__/] },
-    ...(shouldIncludeExternalDirs
-      ? // Allowing importing TS/TSX files from outside of the root dir.
-        {}
-      : { include: [dir, ...babelIncludeRegexes] }),
-    exclude: (excludePath: string) => {
-      if (babelIncludeRegexes.some((r) => r.test(excludePath))) {
-        return false
-      }
-
-      const shouldBeBundled = isResourceInPackages(
-        excludePath,
-        finalTranspilePackages
-      )
-      if (shouldBeBundled) return false
-
-      return excludePath.includes('node_modules')
-    },
-  }
 
   const aliasCodeConditionTest = [codeCondition.test, pageExtensionsRegex]
 
@@ -1512,7 +1519,11 @@ export default async function getBaseWebpackConfig(
               : []),
             {
               ...codeCondition,
-              use: [...reactRefreshLoaders, defaultLoaders.babel],
+              use: [
+                ...reactRefreshLoaders,
+                defaultLoaders.babel,
+                reactCompilerLoader,
+              ].filter(Boolean),
             },
           ],
         },

diff --git a/test/e2e/react-compiler/app/layout.tsx b/test/e2e/react-compiler/app/layout.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 export default function RootLayout({
   children,
 }: {

diff --git a/test/e2e/react-compiler/app/page.tsx b/test/e2e/react-compiler/app/page.tsx
@@ -1,17 +1,19 @@
 'use client'
 
 export default function Page() {
-  let heading: any = null
-  // eslint-disable-next-line no-eval
-  const $_ = eval('$')
-  if (Array.isArray($_)) {
-    // console.log("useMemoCache", $_);
-    heading = (
-      <h1 className="text-9xl">
-        {/* @ts-ignore */}
-        React compiler is enabled with <strong>{$_.length}</strong> memo slots
-      </h1>
-    )
+  let heading: any = ''
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line no-eval
+    const $_ = eval('$')
+
+    if (Array.isArray($_)) {
+      heading = (
+        <h1 id="react-compiler-enabled-message">
+          {/* @ts-ignore */}
+          React compiler is enabled with <strong>{$_.length}</strong> memo slots
+        </h1>
+      )
+    }
   }
 
   return (

diff --git a/test/e2e/react-compiler/react-compiler.test.ts b/test/e2e/react-compiler/react-compiler.test.ts
@@ -1,4 +1,5 @@
 import { nextTestSetup, FileRef } from 'e2e-utils'
+import { retry } from 'next-test-utils'
 import { join } from 'path'
 
 describe.each(
@@ -19,9 +20,13 @@ describe.each(
   })
 
   it('should render', async () => {
-    const $ = await next.render$('/')
-    expect($('h1').text()).toMatch(
-      /React compiler is enabled with .+ memo slots/
-    )
+    const browser = await next.browser('/')
+
+    await retry(async () => {
+      const text = await browser
+        .elementByCss('#react-compiler-enabled-message')
+        .text()
+      expect(text).toMatch(/React compiler is enabled with \d+ memo slots/)
+    })
   })
 })