Enable anonymous function naming in React Compiler (#84070)

Co-authored-by: Benjamin Woodruff <[email protected]>

Author: eps1lon

crates/next-core/src/next_shared/webpack_rules/babel.rs

@@ -2,6 +2,7 @@ use std::{collections::BTreeSet, sync::LazyLock};
 
 use anyhow::{Context, Result};
 use regex::Regex;
+use serde::Serialize;
 use turbo_esregex::EsRegex;
 use turbo_rcstr::{RcStr, rcstr};
 use turbo_tasks::{ResolvedVc, Vc};
@@ -16,7 +17,7 @@ use turbopack_core::{
 use turbopack_node::transforms::webpack::WebpackLoaderItem;
 
 use crate::{
-    next_config::{NextConfig, ReactCompilerCompilationMode},
+    next_config::{NextConfig, ReactCompilerCompilationMode, ReactCompilerOptions},
     next_import_map::try_get_next_package,
     next_shared::webpack_rules::{
         ManuallyConfiguredBuiltinLoaderIssue, WebpackLoaderBuiltinCondition,
@@ -145,15 +146,38 @@ pub async fn get_babel_loader_rules(
     }
 
     let mut loader_conditions = Vec::new();
-    if let Some(react_compiler_options) = &*react_compiler_options
+    if let Some(react_compiler_options) = react_compiler_options.as_ref()
         && let Some(babel_plugin_path) =
             resolve_babel_plugin_react_compiler(next_config, project_path).await?
     {
         let react_compiler_options = react_compiler_options.await?;
+
+        // we don't want to accept user-supplied `environment` options, but we do want to pass
+        // `enableNameAnonymousFunctions` down to the babel plugin based on dev/prod.
+        #[derive(Serialize)]
+        #[serde(rename_all = "camelCase")]
+        struct EnvironmentOptions {
+            enable_name_anonymous_functions: bool,
+        }
+
+        #[derive(Serialize)]
+        struct ResolvedOptions<'a> {
+            #[serde(flatten)]
+            base: &'a ReactCompilerOptions,
+            environment: EnvironmentOptions,
+        }
+
+        let resolved_options = ResolvedOptions {
+            base: &react_compiler_options,
+            environment: EnvironmentOptions {
+                enable_name_anonymous_functions: builtin_conditions
+                    .contains(&WebpackLoaderBuiltinCondition::Development),
+            },
+        };
         let react_compiler_plugins =
             serde_json::Value::Array(vec![serde_json::Value::Array(vec![
                 serde_json::Value::String(babel_plugin_path.into_owned()),
-                serde_json::to_value(&*react_compiler_options)
+                serde_json::to_value(resolved_options)
                     .expect("react compiler options JSON serialization should never fail"),
             ])]);
 

package.json

@@ -155,7 +155,7 @@
     "abort-controller": "3.0.0",
     "alex": "9.1.0",
     "async-sema": "3.0.1",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "0.0.0-experimental-3fde738-20250918",
     "browserslist": "4.25.1",
     "buffer": "5.6.0",
     "cheerio": "0.22.0",

packages/next/package.json

@@ -234,7 +234,7 @@
     "async-sema": "3.0.0",
     "axe-playwright": "2.0.3",
     "babel-loader": "10.0.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "0.0.0-experimental-3fde738-20250918",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "browserify-zlib": "0.2.0",

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

@@ -1,3 +1,4 @@
+import type { EnvironmentConfig } from 'babel-plugin-react-compiler'
 import path from 'path'
 import type { JSONValue, ReactCompilerOptions } from '../server/config-shared'
 import type { NextBabelLoaderOptions } from './babel/loader/types'
@@ -23,16 +24,14 @@ const getReactCompilerPlugins = (
     return undefined
   }
 
-  const defaultOptions: ReactCompilerOptions = isDev
-    ? {
-        // TODO: enable `environment.enableNameAnonymousFunctions`Ï
-      }
-    : {}
+  const environment: Pick<EnvironmentConfig, 'enableNameAnonymousFunctions'> = {
+    enableNameAnonymousFunctions: isDev,
+  }
   const options: ReactCompilerOptions =
     typeof maybeOptions === 'boolean' ? {} : maybeOptions
   const compilerOptions: JSONValue = {
-    ...defaultOptions,
     ...options,
+    environment,
   }
   return [[getReactCompiler(), compilerOptions]]
 }

pnpm-lock.yaml

@@ -0,0 +1,23 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [callFrame, setCallFrame] = useState(null)
+  useEffect(() => {
+    const error = new Error('test-top-frame')
+    console.error(error)
+
+    const callStack = new Error('test-top-frame').stack.split(
+      'test-top-frame\n'
+    )[1]
+    // indices might change due to different compiler optimizations
+    const callFrame = callStack.split('\n')[0]
+    setCallFrame(callFrame)
+  }, [])
+  return (
+    <pre data-testid="call-frame" aria-busy={callFrame === null}>
+      {String(callFrame)}
+    </pre>
+  )
+}

test/e2e/react-compiler/app/function-naming/page.tsx

@@ -1,27 +1,31 @@
 'use client'
 
-import { useEffect } from 'react'
+import { Profiler, useReducer } from 'react'
 
-export default function Page() {
-  let $_: any
-  if (typeof window !== 'undefined') {
-    // eslint-disable-next-line no-eval
-    $_ = eval('$')
-  }
+if (typeof window !== 'undefined') {
+  ;(window as any).staticChildRenders = 0
+}
 
-  useEffect(() => {
-    if (Array.isArray($_)) {
-      document.getElementById('react-compiler-enabled-message')!.textContent =
-        `React compiler is enabled with ${$_!.length} memo slots`
-    }
-  })
+function StaticChild() {
+  return (
+    <Profiler
+      onRender={(id, phase) => {
+        ;(window as any).staticChildRenders += 1
+      }}
+      id="test"
+    >
+      <div>static child</div>
+    </Profiler>
+  )
+}
 
+export default function Page() {
+  const [count, increment] = useReducer((n) => n + 1, 1)
   return (
     <>
-      <div>
-        <h1 id="react-compiler-enabled-message" />
-        <p>hello world</p>
-      </div>
+      <div data-testid="parent-commits">Parent commits: {count}</div>
+      <button onClick={increment}>Increment</button>
+      <StaticChild />
     </>
   )
 }

test/e2e/react-compiler/app/page.tsx

@@ -5,6 +5,7 @@ const nextConfig = {
   experimental: {
     reactCompiler: true,
   },
+  reactProductionProfiling: true,
 }
 
 module.exports = nextConfig