Honour Metro's experimentalImportSupport in react-native/babel-preset via the Babel caller

`experimentalImportSupport: true` in a Metro config asks Metro to lower `import`/`export` itself, which needs `react-native/babel-preset` to leave ESM intact. `react-native/metro-babel-transformer` only passes the matching `disableImportExportTransform` preset option when it builds the preset config itself, i.e. when the project has no Babel config. Every app created from the template has a `babel.config.js` naming the preset, so the transformer extends that file instead, the preset's CommonJS transform runs regardless, Metro's import plugin then finds nothing to lower, and the Metro option is silently a no-op (react/metro#909).

The same lowering is what keeps default and namespace imports eager under `inlineRequires`: Babel emits `_interopRequireDefault(require(...))` at module scope, which the inline-requires plugin does not inline, so only named imports become lazy.

Pass `experimentalImportSupport` through the Babel caller and resolve it in the preset as `options.disableImportExportTransform ?? babel.caller(...) ?? false`, the channel #57973 added for `inlinePlatform`. An explicit preset option still wins and the default is unchanged, so builds that do not set the Metro option are byte-identical. `babel-preset-expo` reads the equivalent flag from its caller for the same reason.

Changelog:
[General][Fixed] - `experimentalImportSupport` in a Metro config now takes effect when `react-native/babel-preset` is named in a project Babel config

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: shubh73

packages/react-native-babel-preset/src/__tests__/import-export-transform-opt-in-test.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+// $FlowExpectedError[untyped-import] - Preset is untyped
+const preset = require('../index');
+const babel = require('@babel/core');
+
+const FILENAME = '/app/src/App.js';
+const SRC = "import foo from './foo';\nexport const bar = foo;";
+
+type PresetOptions = {
+  disableImportExportTransform?: boolean,
+};
+
+type CallerOptions = {
+  experimentalImportSupport?: boolean,
+};
+
+function transform({
+  presetOptions = {},
+  caller = {},
+}: {
+  presetOptions?: PresetOptions,
+  caller?: CallerOptions,
+} = {}): string {
+  const result = babel.transformSync(SRC, {
+    babelrc: false,
+    caller: {name: 'test', ...caller},
+    compact: false,
+    configFile: false,
+    filename: FILENAME,
+    presets: [[preset, {dev: false, ...presetOptions}]],
+    sourceMaps: false,
+    sourceType: 'module',
+  });
+  const code = result?.code;
+  if (code == null) {
+    throw new Error('Expected the transform to produce code');
+  }
+  return code;
+}
+
+function isLowered(code: string): boolean {
+  return code.includes('require(') && !/^import\b/m.test(code);
+}
+
+describe('import/export lowering is skipped when the caller lowers it', () => {
+  test('lowers by default', () => {
+    expect(isLowered(transform())).toBe(true);
+  });
+
+  test('keeps ESM when opted out via preset options', () => {
+    expect(
+      isLowered(
+        transform({presetOptions: {disableImportExportTransform: true}}),
+      ),
+    ).toBe(false);
+  });
+
+  test('keeps ESM when the Babel caller lowers imports itself', () => {
+    // The only channel available when the preset is named in a babel.config.js,
+    // where Babel supplies no preset options. Metro's transformer sets this from
+    // its `experimentalImportSupport` transform option.
+    expect(
+      isLowered(transform({caller: {experimentalImportSupport: true}})),
+    ).toBe(false);
+  });
+
+  test('lowers when the Babel caller does not lower imports', () => {
+    expect(
+      isLowered(transform({caller: {experimentalImportSupport: false}})),
+    ).toBe(true);
+  });
+
+  test('preset options take precedence over the caller', () => {
+    expect(
+      isLowered(
+        transform({
+          presetOptions: {disableImportExportTransform: false},
+          caller: {experimentalImportSupport: true},
+        }),
+      ),
+    ).toBe(true);
+  });
+});

packages/react-native-babel-preset/src/configs/main.js

@@ -60,6 +60,12 @@ function getInlinePlatform(caller) {
   return caller?.inlinePlatform ?? false;
 }
 
+// Boolean, whether the caller lowers `import`/`export` itself (Metro's
+// `experimentalImportSupport`). When it does, the preset must leave ESM intact.
+function getExperimentalImportSupport(caller) {
+  return caller?.experimentalImportSupport ?? false;
+}
+
 // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
 const loose = true;
 
@@ -78,6 +84,11 @@ const getPreset = (src, options, babel) => {
   const inlinePlatform =
     options.inlinePlatform ?? babel?.caller(getInlinePlatform) ?? false;
 
+  const disableImportExportTransform =
+    options.disableImportExportTransform ??
+    babel?.caller(getExperimentalImportSupport) ??
+    false;
+
   // Hermes V1 uses more optimised transform profiles. There is currently no
   // difference between stable and canary, but canary may in future be used to
   // test features in pre-prod Hermes V1 versions.
@@ -151,7 +162,7 @@ const getPreset = (src, options, babel) => {
     extraPlugins.push([require('@react-native/babel-plugin-codegen')]);
   }
 
-  if (!options.disableImportExportTransform) {
+  if (!disableImportExportTransform) {
     extraPlugins.push(
       [require('@babel/plugin-proposal-export-default-from')],
       [

packages/react-native-babel-transformer/src/__tests__/experimental-import-support-test.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+const generate = require('@babel/generator').default;
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+
+const PROJECT_ROOT = path.sep === '/' ? '/my/project' : 'C:\\my\\project';
+const PRESET_PATH = require.resolve('@react-native/babel-preset');
+const SRC = "import foo from './foo';\nexport const bar = foo;";
+
+// The transformer memoizes its resolved Babel config in a module-level
+// closure, so a fresh module instance is required for every distinct config.
+beforeEach(() => {
+  jest.resetModules();
+});
+
+let tmpDir: string;
+let babelConfigPath: string;
+
+beforeAll(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'rn-babel-transformer-'));
+  babelConfigPath = path.join(tmpDir, 'babel.config.js');
+  // A project Babel config that names the preset with no options - the shape
+  // of the app template. The preset then only learns about Metro's transform
+  // options through the Babel caller.
+  fs.writeFileSync(
+    babelConfigPath,
+    `module.exports = {presets: [${JSON.stringify(PRESET_PATH)}]};\n`,
+  );
+});
+
+afterAll(() => {
+  fs.rmSync(tmpDir, {recursive: true, force: true});
+});
+
+function transformToCode({
+  experimentalImportSupport,
+  extendsBabelConfigPath,
+}: {
+  experimentalImportSupport: boolean,
+  extendsBabelConfigPath?: string,
+}): string {
+  const {transform} = require('../index.js');
+  const {ast} = transform({
+    filename: path.join(PROJECT_ROOT, 'App.js'),
+    src: SRC,
+    plugins: [],
+    options: {
+      dev: true,
+      enableBabelRuntime: false,
+      enableBabelRCLookup: false,
+      experimentalImportSupport,
+      extendsBabelConfigPath,
+      globalPrefix: '__metro__',
+      hot: false,
+      minify: false,
+      platform: 'ios',
+      publicPath: 'test',
+      projectRoot: PROJECT_ROOT,
+    },
+  });
+  return generate(ast).code;
+}
+
+function isLowered(code: string): boolean {
+  return code.includes('require(') && !/^import\b/m.test(code);
+}
+
+describe.each([
+  ['no project Babel config', () => undefined],
+  ['a project Babel config naming the preset', () => babelConfigPath],
+])('with %s', (_name, getExtendsPath) => {
+  test('lowers import/export when experimentalImportSupport is off', () => {
+    const code = transformToCode({
+      experimentalImportSupport: false,
+      extendsBabelConfigPath: getExtendsPath(),
+    });
+
+    expect(isLowered(code)).toBe(true);
+  });
+
+  test('keeps import/export when experimentalImportSupport is on', () => {
+    // Metro lowers ESM itself in this mode. If the preset lowered it first,
+    // Metro's plugin would find nothing to do and the option would be a no-op.
+    const code = transformToCode({
+      experimentalImportSupport: true,
+      extendsBabelConfigPath: getExtendsPath(),
+    });
+
+    expect(isLowered(code)).toBe(false);
+    expect(code).toContain("import foo from './foo'");
+  });
+});

packages/react-native-babel-transformer/src/index.js

@@ -199,6 +199,10 @@ const transform /*: BabelTransformer['transform'] */ = ({
       platform: options.platform,
       // $FlowFixMe[prop-missing] Remove suppression after next Metro release
       inlinePlatform: options.inlinePlatform,
+      // Lets the preset skip its own import/export lowering when Metro will do
+      // it, even when the preset is named in a project Babel config and so
+      // receives no `disableImportExportTransform` option from us.
+      experimentalImportSupport: options.experimentalImportSupport,
       unstable_transformProfile: options.unstable_transformProfile,
     },
     ast: true,