Turbopack: Fix babel-loader (allowing built-in or manual configuration) (#82676)

## Context: What's broken?

For using `styled-jsx` with `react-compiler`, we need to use `babel-loader`, but it turns out that outside of our current narrow use of `react-compiler`, our usage of `babel-loader` in Turbopack is totally broken:
* Babel configs cause us to exit with an error claiming it's not supported.
* We have code in Turbopack for enabling `babel-loader`, but we try to use the version from NPM instead of the one bundled internally with Next.js. We should use the one bundled internally with Next.js.
* We shouldn't run all the babel transforms in the `next/babel` preset because they're redundant with SWC. `react-compiler` added a "standalone" mode to the babel-loader that's close to what we want, but I need to extend it for Turbopack's use-case.

## This PR

- Remove the warnings/errors that say babel isn't supported with Turbopack.
- Automatically enable babel when a config file is present.
- Modify the `next/babel` preset in Turbopack (I'm re-using/extending `'standalone'` mode) to enable syntax plugins, but disable any transformations or down-leveling (we expect SWC to do this). This is a bit hacky because babel's presets aren't designed to support this configuration.
- Pre-bundle `plugin-syntax-typescript`. This is a stub package that's also used by the typescript preset, so this really just exposes an extra entrypoint into the babel bundle.
- Migrate one of the legacy babel `test/integration` tests (that uses flow syntax) to `test/e2e`. The turbopack `foreign` condition doesn't work correctly without test isolation.
- Enable Turbopack for all the babel-related integration and e2e tests I could find.

## Follow-ups

- [ ] #83502 React compiler can cause babel to run *twice*. Merge the logic for automatic configuration of `react-compiler` (currently in JS) and `babel` (in Rust), so that this can't happen.
- [ ] #84002 Update the docs to show that Babel is now supported.

Author: bgw

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

@@ -1,16 +1,11 @@
 use std::sync::LazyLock;
 
-use anyhow::Result;
+use anyhow::{Context, Result};
 use regex::Regex;
 use turbo_rcstr::{RcStr, rcstr};
-use turbo_tasks::{ResolvedVc, Vc};
-use turbo_tasks_fs::{self, FileSystemEntryType, FileSystemPath};
+use turbo_tasks::ResolvedVc;
+use turbo_tasks_fs::{self, FileSystemEntryType, FileSystemPath, to_sys_path};
 use turbopack::module_options::{ConditionItem, LoaderRuleItem};
-use turbopack_core::{
-    issue::{Issue, IssueExt, IssueSeverity, IssueStage, OptionStyledString, StyledString},
-    reference_type::{CommonJsReferenceSubType, ReferenceType},
-    resolve::{node::node_cjs_resolve_options, parse::Request, pattern::Pattern, resolve},
-};
 use turbopack_node::transforms::webpack::WebpackLoaderItem;
 
 use crate::next_shared::webpack_rules::WebpackLoaderBuiltinCondition;
@@ -32,6 +27,10 @@ const BABEL_CONFIG_FILES: &[&str] = &[
 static BABEL_LOADER_RE: LazyLock<Regex> =
     LazyLock::new(|| Regex::new(r"(^|/)@?babel[-/]loader($|/|\.)").unwrap());
 
+/// The forked version of babel-loader that we should use for automatic configuration. This version
+/// is always available, as it's installed as part of next.js.
+const NEXT_JS_BABEL_LOADER: &str = "next/dist/build/babel/loader";
+
 pub async fn detect_likely_babel_loader(
     webpack_rules: &[(RcStr, LoaderRuleItem)],
 ) -> Result<Option<RcStr>> {
@@ -54,41 +53,39 @@ pub async fn detect_likely_babel_loader(
 pub async fn get_babel_loader_rules(
     project_root: FileSystemPath,
 ) -> Result<Vec<(RcStr, LoaderRuleItem)>> {
-    let mut has_babel_config = false;
+    let mut babel_config_path = None;
     for &filename in BABEL_CONFIG_FILES {
-        let filetype = *project_root.join(filename)?.get_type().await?;
+        let path = project_root.join(filename)?;
+        let filetype = *path.get_type().await?;
         if matches!(filetype, FileSystemEntryType::File) {
-            has_babel_config = true;
+            babel_config_path = Some(path);
             break;
         }
     }
-    if !has_babel_config {
+    let Some(babel_config_path) = babel_config_path else {
         return Ok(Vec::new());
-    }
+    };
 
-    if !*is_babel_loader_available(project_root.clone()).await? {
-        BabelIssue {
-            path: project_root.clone(),
-            title: StyledString::Text(rcstr!(
-                "Unable to resolve babel-loader, but a babel config is present"
-            ))
-            .resolved_cell(),
-            description: StyledString::Text(rcstr!(
-                "Make sure babel-loader is installed via your package manager."
-            ))
-            .resolved_cell(),
-            severity: IssueSeverity::Fatal,
-        }
-        .resolved_cell()
-        .emit();
-    }
+    // - See `packages/next/src/build/babel/loader/types.d.ts` for all the configuration options.
+    // - See `packages/next/src/build/get-babel-loader-config.ts` for how we use this in webpack.
+    let serde_json::Value::Object(loader_options) = serde_json::json!({
+        // `transformMode: default` (what the webpack implementation does) would run all of the
+        // Next.js-specific transforms as babel transforms. Because we always have to pay the cost
+        // of parsing with SWC after the webpack loader runs, we want to keep running those
+        // transforms using SWC, so use `standalone` instead.
+        "transformMode": "standalone",
+        "cwd": to_sys_path_str(project_root).await?,
+        "configFile": to_sys_path_str(babel_config_path).await?,
+    }) else {
+        unreachable!("is an object")
+    };
 
     Ok(vec![(
         rcstr!("*.{js,jsx,ts,tsx,cjs,mjs,mts,cts}"),
         LoaderRuleItem {
             loaders: ResolvedVc::cell(vec![WebpackLoaderItem {
-                loader: rcstr!("babel-loader"),
-                options: Default::default(),
+                loader: rcstr!(NEXT_JS_BABEL_LOADER),
+                options: loader_options,
             }]),
             rename_as: Some(rcstr!("*")),
             condition: Some(ConditionItem::Not(Box::new(ConditionItem::Builtin(
@@ -98,49 +95,13 @@ pub async fn get_babel_loader_rules(
     )])
 }
 
-#[turbo_tasks::function]
-pub async fn is_babel_loader_available(project_path: FileSystemPath) -> Result<Vc<bool>> {
-    let result = resolve(
-        project_path.clone(),
-        ReferenceType::CommonJs(CommonJsReferenceSubType::Undefined),
-        Request::parse(Pattern::Constant(rcstr!("babel-loader/package.json"))),
-        node_cjs_resolve_options(project_path),
-    );
-    let assets = result.primary_sources().await?;
-    Ok(Vc::cell(!assets.is_empty()))
-}
-
-#[turbo_tasks::value]
-struct BabelIssue {
-    path: FileSystemPath,
-    title: ResolvedVc<StyledString>,
-    description: ResolvedVc<StyledString>,
-    severity: IssueSeverity,
-}
-
-#[turbo_tasks::value_impl]
-impl Issue for BabelIssue {
-    #[turbo_tasks::function]
-    fn stage(&self) -> Vc<IssueStage> {
-        IssueStage::Transform.into()
-    }
-
-    fn severity(&self) -> IssueSeverity {
-        self.severity
-    }
-
-    #[turbo_tasks::function]
-    fn file_path(&self) -> Vc<FileSystemPath> {
-        self.path.clone().cell()
-    }
-
-    #[turbo_tasks::function]
-    fn title(&self) -> Vc<StyledString> {
-        *self.title
-    }
-
-    #[turbo_tasks::function]
-    fn description(&self) -> Vc<OptionStyledString> {
-        Vc::cell(Some(self.description))
-    }
+/// A system path that can be passed to the webpack loader
+async fn to_sys_path_str(path: FileSystemPath) -> Result<String> {
+    let sys_path = to_sys_path(path)
+        .await?
+        .context("path should use a DiskFileSystem")?;
+    Ok(sys_path
+        .to_str()
+        .with_context(|| format!("{sys_path:?} is not valid utf-8"))?
+        .to_owned())
 }

package.json

@@ -100,7 +100,6 @@
     "@babel/parser": "7.27.0",
     "@babel/plugin-syntax-explicit-resource-management": "7.25.7",
     "@babel/plugin-transform-object-rest-spread": "7.25.9",
-    "@babel/preset-flow": "7.25.9",
     "@babel/preset-react": "7.26.3",
     "@changesets/changelog-github": "0.5.1",
     "@changesets/cli": "2.29.3",

packages/next/errors.json

@@ -808,5 +808,6 @@
   "807": "Expected a %s response header.",
   "808": "Invalid binary HMR message: insufficient data (expected %s bytes, got %s)",
   "809": "Invalid binary HMR message of type %s",
-  "810": "React debug channel stream error"
+  "810": "React debug channel stream error",
+  "811": "unsupported transformMode in loader options: %s"
 }