fix(babel-preset): fix `@babel/runtime` not being found in pnpm setups (#3062)

.changeset/olive-starfishes-itch.md

@@ -0,0 +1,5 @@
+---
+"@rnx-kit/babel-preset-metro-react-native": patch
+---
+
+Ensure `@babel/runtime` can be found in a pnpm environment

.yarnrc.yml

@@ -17,42 +17,16 @@ npmRegistryServer: "https://registry.npmjs.org"
 packageExtensions:
   "@fluentui/utilities@*":
     peerDependenciesMeta:
+      # https://github.com/microsoft/fluentui/pull/30964
       "@types/react":
         optional: true
   "@react-native-community/cli-debugger-ui@*":
     dependencies:
-      "@babel/runtime": ^7.20.0
-  "@react-native/babel-plugin-codegen@*":
-    peerDependencies:
-      "@babel/preset-env": ^7.20.0
-  "@react-native/babel-preset@*":
-    peerDependencies:
-      "@babel/preset-env": ^7.20.0
-  "@react-native/community-cli-plugin@*":
-    peerDependencies:
-      "@babel/preset-env": ^7.20.0
-  "@react-native/metro-babel-transformer@*":
-    peerDependencies:
-      "@babel/preset-env": ^7.20.0
-  "@react-native/metro-config@*":
-    peerDependencies:
-      "@babel/preset-env": ^7.20.0
-  "@react-native/virtualized-lists@*":
-    peerDependencies:
+      # https://github.com/react-native-community/cli/pull/2352
       "@babel/runtime": ^7.20.0
   babel-plugin-transform-flow-enums@*:
     peerDependencies:
       "@babel/core": ^7.20.0
-  memfs@4.x:
-    peerDependenciesMeta:
-      memfs:
-        optional: true
-      quill-delta:
-        optional: true
-      rxjs:
-        optional: true
-      tslib:
-        optional: true
   metro-config@*:
     dependencies:
       # `metro-config` fails to resolve `JsTransformerConfig` because it's in another package
@@ -60,19 +34,10 @@ packageExtensions:
   react-native-macos@*:
     dependencies:
       # Required by `react-native-macos/local-cli/runMacOS/runMacOS.js`
+      # https://github.com/microsoft/react-native-macos/pull/1993
       "@react-native-community/cli-tools": ^12.3.0
     peerDependencies:
-      "@babel/preset-env": ^7.1.6
       react-native: "*"
-  react-native-windows@*:
-    peerDependencies:
-      "@babel/preset-env": ^7.1.6
-  react-native@*:
-    dependencies:
-      # Implicit dependency introduced by Babel
-      "@babel/runtime": ^7.20.0
-    peerDependencies:
-      "@babel/preset-env": ^7.1.6
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-compat.cjs
     spec: "@yarnpkg/plugin-compat"

packages/babel-preset-metro-react-native/package.json

@@ -28,8 +28,9 @@
     "babel-plugin-const-enum": "^1.0.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/core": "^7.20.0",
+    "@babel/plugin-transform-typescript": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "*",
     "metro-react-native-babel-preset": "*"
   },
@@ -47,6 +48,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/plugin-transform-typescript": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@rnx-kit/babel-plugin-import-path-remapper": "*",
     "@rnx-kit/eslint-config": "*",
     "@rnx-kit/scripts": "*",

packages/babel-preset-metro-react-native/src/index.js

@@ -1,6 +1,7 @@
 /* jshint esversion: 8, node: true */
 // @ts-check
 "use strict";
+const path = require("path");
 
 /**
  * @typedef {import("@babel/core").ConfigAPI} ConfigAPI
@@ -35,6 +36,25 @@ function parseVersion(version) {
   return Number(major) * 1000 + Number(minor);
 }
 
+/**
+ * @param {string} id
+ * @param {Required<TransformOptions>["overrides"]} overrides
+ * @param {string} startDir
+ * @return {PluginItem | undefined}
+ */
+function findBabelPlugin(id, overrides, startDir) {
+  const plugin = require(require.resolve(id, { paths: [startDir] }));
+  for (const override of overrides) {
+    const entry = override.plugins?.find((p) => {
+      return Array.isArray(p) ? p[0] === plugin : p === plugin;
+    });
+    if (entry) {
+      return entry;
+    }
+  }
+  return undefined;
+}
+
 /**
  * Returns whether Babel implements compiler assumptions.
  * @param {ConfigAPI | undefined} api
@@ -44,6 +64,49 @@ function hasCompilerAssumptions(api) {
   return Boolean(api?.version && parseVersion(api.version) >= 7013);
 }
 
+/**
+ * Configures `@babel/plugin-transform-classes` to emit less code for classes.
+ * Useful if you're using TypeScript and want to avoid additional checks.
+ * @param {Required<TransformOptions>} preset
+ * @param {string} babelPreset
+ * @param {ConfigAPI | undefined} api
+ */
+function configurePluginTransformClasses(preset, babelPreset, api) {
+  if (hasCompilerAssumptions(api)) {
+    const { warn } = require("@rnx-kit/console");
+    warn(
+      "`looseClassTransform` is deprecated — consider migrating to the top level assumptions for more granular control (see https://babeljs.io/docs/babel-plugin-transform-classes#loose)"
+    );
+  }
+
+  const plugin = findBabelPlugin(
+    "@babel/plugin-transform-classes",
+    preset.overrides,
+    babelPreset
+  );
+  if (Array.isArray(plugin)) {
+    plugin[1] = { loose: true };
+  }
+}
+
+/**
+ * Configures `@babel/plugin-transform-runtime` to ensure it works in a pnpm
+ * environment.
+ * @param {Required<TransformOptions>} preset
+ * @param {string} babelPreset
+ */
+function configurePluginTransformRuntime(preset, babelPreset) {
+  const plugin = findBabelPlugin(
+    "@babel/plugin-transform-runtime",
+    preset.overrides,
+    babelPreset
+  );
+  if (Array.isArray(plugin)) {
+    const runtime = require.resolve("@babel/runtime/package.json");
+    plugin[1].absoluteRuntime = path.dirname(runtime);
+  }
+}
+
 /**
  * Returns plugin for transforming `const enum` if necessary.
  *
@@ -67,7 +130,6 @@ function constEnumPlugin() {
 
 function loadPreset(projectRoot = process.cwd()) {
   const fs = require("fs");
-  const path = require("path");
 
   const manifestPath = path.join(projectRoot, "package.json");
   const manifest = fs.readFileSync(manifestPath, { encoding: "utf-8" });
@@ -182,18 +244,10 @@ module.exports = (
   });
 
   if (looseClassTransform) {
-    if (hasCompilerAssumptions(api)) {
-      const { warn } = require("@rnx-kit/console");
-      warn(
-        "`looseClassTransform` is deprecated — consider migrating to the top level assumptions for more granular control (see https://babeljs.io/docs/babel-plugin-transform-classes#loose)"
-      );
-    }
-    const pluginClasses = require.resolve("@babel/plugin-transform-classes", {
-      paths: [babelPreset],
-    });
-    overrides.push({
-      plugins: [[pluginClasses, { loose: true }]],
-    });
+    configurePluginTransformClasses(metroPreset, babelPreset, api);
+  }
+  if (options?.enableBabelRuntime !== false) {
+    configurePluginTransformRuntime(metroPreset, babelPreset);
   }
 
   return metroPreset;

yarn.lock

@@ -3555,6 +3555,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.20.0"
     "@babel/plugin-transform-typescript": "npm:^7.20.0"
+    "@babel/runtime": "npm:^7.20.0"
     "@rnx-kit/babel-plugin-import-path-remapper": "npm:*"
     "@rnx-kit/console": "npm:^1.0.13"
     "@rnx-kit/eslint-config": "npm:*"
@@ -3570,8 +3571,9 @@ __metadata:
     prettier: "npm:^3.0.0"
     typescript: "npm:^5.0.0"
   peerDependencies:
-    "@babel/core": ^7.0.0
-    "@babel/plugin-transform-typescript": ^7.0.0
+    "@babel/core": ^7.20.0
+    "@babel/plugin-transform-typescript": ^7.20.0
+    "@babel/runtime": ^7.20.0
     "@react-native/babel-preset": "*"
     metro-react-native-babel-preset: "*"
   peerDependenciesMeta: