[turbopack] Ensure React Compiler options are based dev vs prod

Author: eps1lon

packages/next/src/build/babel/loader/types.d.ts

@@ -1,4 +1,5 @@
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
+import type { JSONValue } from '../../../server/config-shared'
 import type { Span } from '../../../trace'
 
 export interface NextJsLoaderContext extends webpack.LoaderContext<{}> {
@@ -17,7 +18,7 @@ export interface NextBabelLoaderBaseOptions {
   /**
    * Custom plugins to be added to the generated babel options.
    */
-  reactCompilerPlugins?: Array<any>
+  reactCompilerPlugins?: Array<JSONValue>
 
   /**
    * Paths that the loader should not apply the react-compiler to.

packages/next/src/build/get-babel-loader-config.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import type { ReactCompilerOptions } from '../server/config-shared'
+import type { JSONValue, ReactCompilerOptions } from '../server/config-shared'
 import type { NextBabelLoaderOptions } from './babel/loader/types'
 
 function getReactCompiler() {
@@ -15,25 +15,27 @@ function getReactCompiler() {
 }
 
 const getReactCompilerPlugins = (
-  options: boolean | ReactCompilerOptions | undefined,
-  isServer: boolean
-) => {
-  if (!options || isServer) {
+  maybeOptions: boolean | ReactCompilerOptions | undefined,
+  isServer: boolean,
+  isDev: boolean
+): undefined | JSONValue[] => {
+  if (!maybeOptions || isServer) {
     return undefined
   }
 
-  const compilerOptions = typeof options === 'boolean' ? {} : options
-  if (options) {
-    return [
-      [
-        getReactCompiler(),
-        {
-          // https://react.dev/reference/react-compiler/panicThreshold
-          panicThreshold: 'none',
-          ...compilerOptions,
-        },
-      ],
-    ]
+  if (maybeOptions) {
+    const defaultOptions: ReactCompilerOptions = isDev
+      ? {
+          // TODO: enable `environment.enableNameAnonymousFunctions`Ï
+        }
+      : {}
+    const options: ReactCompilerOptions =
+      typeof maybeOptions === 'boolean' ? {} : maybeOptions
+    const compilerOptions: JSONValue = {
+      ...defaultOptions,
+      ...options,
+    }
+    return [[getReactCompiler(), compilerOptions]]
   }
   return undefined
 }
@@ -67,7 +69,8 @@ const getBabelLoader = (
       hasJsxRuntime: true,
       reactCompilerPlugins: getReactCompilerPlugins(
         reactCompilerOptions,
-        isServer
+        isServer,
+        dev
       ),
       reactCompilerExclude,
     }
@@ -90,11 +93,13 @@ const getReactCompilerLoader = (
   reactCompilerOptions: boolean | ReactCompilerOptions | undefined,
   cwd: string,
   isServer: boolean,
-  reactCompilerExclude: ((excludePath: string) => boolean) | undefined
+  reactCompilerExclude: ((excludePath: string) => boolean) | undefined,
+  isDev: boolean
 ) => {
   const reactCompilerPlugins = getReactCompilerPlugins(
     reactCompilerOptions,
-    isServer
+    isServer,
+    isDev
   )
   if (!reactCompilerPlugins) {
     return undefined

packages/next/src/build/swc/index.ts

@@ -621,38 +621,47 @@ function bindingToApi(
       ...options,
       nextConfig: await serializeNextConfig(
         options.nextConfig,
-        path.join(options.rootPath, options.projectPath)
+        path.join(options.rootPath, options.projectPath),
+        options.dev
       ),
       env: rustifyEnv(options.env),
     }
   }
 
   async function rustifyPartialProjectOptions(
-    options: Partial<ProjectOptions>
+    options: Partial<ProjectOptions>,
+    dev: boolean
   ): Promise<NapiPartialProjectOptions> {
     return {
       ...options,
       nextConfig:
         options.nextConfig &&
         (await serializeNextConfig(
           options.nextConfig,
-          path.join(options.rootPath!, options.projectPath!)
+          path.join(options.rootPath!, options.projectPath!),
+          dev
         )),
       env: options.env && rustifyEnv(options.env),
     }
   }
 
   class ProjectImpl implements Project {
     private readonly _nativeProject: { __napiType: 'Project' }
+    private dev: boolean
 
-    constructor(nativeProject: { __napiType: 'Project' }) {
+    constructor(nativeProject: { __napiType: 'Project' }, dev: boolean) {
       this._nativeProject = nativeProject
+      this.dev = dev
     }
 
     async update(options: Partial<ProjectOptions>) {
+      if (options.dev !== undefined) {
+        // TODO: Can we actually switch between dev and prod or is that just the types?
+        this.dev = options.dev
+      }
       await binding.projectUpdate(
         this._nativeProject,
-        await rustifyPartialProjectOptions(options)
+        await rustifyPartialProjectOptions(options, this.dev)
       )
     }
 
@@ -795,7 +804,8 @@ function bindingToApi(
 
   async function serializeNextConfig(
     nextConfig: NextConfigComplete,
-    projectPath: string
+    projectPath: string,
+    dev: boolean
   ): Promise<string> {
     // Avoid mutating the existing `nextConfig` object. NOTE: This is only a shallow clone.
     let nextConfigSerializable: Record<string, any> = { ...nextConfig }
@@ -1075,7 +1085,8 @@ function bindingToApi(
         {
           throwTurbopackInternalError,
         }
-      )
+      ),
+      options.dev
     )
   }
 }

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

@@ -492,7 +492,8 @@ export default async function getBaseWebpackConfig(
         config.experimental?.reactCompiler,
         dir,
         isNodeOrEdgeCompilation,
-        codeCondition.exclude
+        codeCondition.exclude,
+        dev
       )
 
   let swcTraceProfilingInitialized = false

packages/next/src/server/config-shared.ts

@@ -89,7 +89,7 @@ export interface StyledComponentsConfig {
   cssProp?: boolean
 }
 
-type JSONValue =
+export type JSONValue =
   | string
   | number
   | boolean