@vxrn/vite-plugin-metro 2.0.0-beta.51.1 → 2.0.0-beta.56.1

package/src/transformer/expoVirtualEnv.integration.test.ts

@@ -0,0 +1,106 @@
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { afterAll, describe, expect, it } from "vitest";
+
+const workspaceRoot = path.resolve(__dirname, "../../../..");
+const metroBin = path.join(workspaceRoot, "node_modules/.bin/metro");
+const fixtureDirs: string[] = [];
+
+afterAll(() => {
+	for (const fixtureDir of fixtureDirs) {
+		rmSync(fixtureDir, { recursive: true, force: true });
+	}
+});
+
+describe("optional Expo env through One Metro", () => {
+	it("executes babel-preset-expo env references in development and production", () => {
+		const fixtureDir = mkdtempSync(path.join(workspaceRoot, "tmp-expo-env-"));
+		fixtureDirs.push(fixtureDir);
+
+		writeFileSync(
+			path.join(fixtureDir, "package.json"),
+			JSON.stringify({ name: "one-expo-env-fixture", private: true }),
+		);
+		writeFileSync(path.join(fixtureDir, ".watchmanconfig"), "{}\n");
+		writeFileSync(
+			path.join(fixtureDir, "tsconfig.json"),
+			JSON.stringify({ compilerOptions: { baseUrl: ".", paths: {} } }),
+		);
+		writeFileSync(
+			path.join(fixtureDir, "babel.config.cjs"),
+			`module.exports = { presets: ['babel-preset-expo'] }\n`,
+		);
+		writeFileSync(
+			path.join(fixtureDir, "metro.config.cjs"),
+			`const { withOne } = require('one/metro-config')
+module.exports = withOne(__dirname, { loadViteConfig: false })
+`,
+		);
+		writeFileSync(
+			path.join(fixtureDir, ".env"),
+			"EXPO_PUBLIC_SENTINEL=development-dotenv-value\nPRIVATE_SENTINEL=private-value\n",
+		);
+		writeFileSync(
+			path.join(fixtureDir, "index.js"),
+			`console.log('observed:' + process.env.EXPO_PUBLIC_SENTINEL)\n`,
+		);
+
+		const bundle = (dev: boolean, sentinel: string, resetCache = false) => {
+			const bundlePath = path.join(
+				fixtureDir,
+				`bundle.${dev ? "dev" : "prod"}.js`,
+			);
+			execFileSync(
+				metroBin,
+				[
+					"build",
+					"index.js",
+					"--config",
+					"metro.config.cjs",
+					"--platform",
+					"ios",
+					"--dev",
+					String(dev),
+					"--minify",
+					"false",
+					"--out",
+					bundlePath,
+					...(resetCache ? ["--reset-cache"] : []),
+				],
+				{
+					cwd: fixtureDir,
+					encoding: "utf8",
+					env: { ...process.env, EXPO_PUBLIC_SENTINEL: sentinel },
+					timeout: 180_000,
+				},
+			);
+			return {
+				code: readFileSync(bundlePath, "utf8"),
+				output: execFileSync(process.execPath, [bundlePath], {
+					cwd: fixtureDir,
+					encoding: "utf8",
+				}),
+			};
+		};
+
+		const development = bundle(true, "development-process-value", true);
+		expect(development.code).toContain("expo/virtual/env.js");
+		expect(development.output).toContain("observed:development-dotenv-value");
+		expect(development.code).not.toContain("private-value");
+
+		writeFileSync(
+			path.join(fixtureDir, ".env"),
+			"EXPO_PUBLIC_SENTINEL=updated-dotenv-value\nPRIVATE_SENTINEL=updated-private-value\n",
+		);
+		const updatedDevelopment = bundle(true, "updated-process-value");
+		expect(updatedDevelopment.output).toContain(
+			"observed:updated-dotenv-value",
+		);
+		expect(updatedDevelopment.code).not.toContain("updated-private-value");
+
+		const production = bundle(false, "production-process-value");
+		expect(production.code).not.toContain("expo/virtual/env.js");
+		expect(production.output).toContain("observed:production-process-value");
+	}, 180_000);
+});

package/src/transformer/expoVirtualEnv.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+
+import { substituteExpoVirtualEnvSource } from './expoVirtualEnv'
+
+const virtualFilename = '/proj/node_modules/expo/virtual/env.js'
+const virtualSource = 'export const env = process.env;'
+
+describe('substituteExpoVirtualEnvSource', () => {
+  it('generates the require.context import in dev', () => {
+    const out = substituteExpoVirtualEnvSource({
+      filename: virtualFilename,
+      src: virtualSource,
+      projectRoot: '/proj',
+      dev: true,
+      environment: 'client',
+    })
+    expect(out).toContain('require.context("../../..",false,/^\\.\\/\\.env/)')
+    expect(out).toContain('.env.development.local')
+    expect(out).toContain('...process.env')
+  })
+
+  it('generates the naming-error proxy in production', () => {
+    const out = substituteExpoVirtualEnvSource({
+      filename: virtualFilename,
+      src: virtualSource,
+      projectRoot: '/proj',
+      dev: false,
+      environment: 'client',
+    })
+    expect(out).toContain('new Proxy')
+    expect(out).toContain('not supported in production bundles')
+  })
+
+  it('leaves the virtual module alone outside client environments', () => {
+    for (const environment of ['node', 'react-server']) {
+      expect(
+        substituteExpoVirtualEnvSource({
+          filename: virtualFilename,
+          src: virtualSource,
+          projectRoot: '/proj',
+          dev: true,
+          environment,
+        })
+      ).toBe(virtualSource)
+    }
+  })
+
+  it('leaves ordinary files alone', () => {
+    expect(
+      substituteExpoVirtualEnvSource({
+        filename: '/proj/src/app.js',
+        src: 'const a = 1',
+        projectRoot: '/proj',
+        dev: true,
+        environment: 'client',
+      })
+    ).toBe('const a = 1')
+  })
+
+  it('leaves .env files alone without Expo installed', () => {
+    const src = 'EXPO_PUBLIC_A=1\nSECRET=2\n'
+    expect(
+      substituteExpoVirtualEnvSource({
+        filename: '/proj/.env',
+        src,
+        projectRoot: '/proj-no-expo',
+        dev: true,
+        environment: 'client',
+      })
+    ).toBe(src)
+  })
+})

package/src/transformer/expoVirtualEnv.ts

@@ -0,0 +1,115 @@
+import { createRequire } from 'node:module'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * narrow optional Expo compatibility shared by the native worker and the
+ * babel transformer, mirroring @expo/metro-config's transform worker: only
+ * expo/virtual/env.js and .env files are special, and everything else
+ * passes through untouched. apps without Expo installed never resolve or
+ * load any Expo module: the virtual file cannot match without the expo
+ * package, and .env files are left alone when the parser is absent.
+ */
+
+type ParseEnvFile = (src: string, isClient: boolean) => Record<string, string>
+
+function loadExpoParseEnvFile(projectRoot: string): ParseEnvFile | null {
+  try {
+    const requireFromProject = createRequire(path.join(projectRoot, 'package.json'))
+    const expoMetroConfigPkg = requireFromProject.resolve(
+      '@expo/metro-config/package.json'
+    )
+    const dotEnvDevelopment = requireFromProject(
+      path.join(
+        path.dirname(expoMetroConfigPkg),
+        'build',
+        'transform-worker',
+        'dot-env-development'
+      )
+    ) as { parseEnvFile?: ParseEnvFile }
+    return dotEnvDevelopment?.parseEnvFile ?? null
+  } catch {
+    return null
+  }
+}
+
+const virtualEnvPattern = /[\\/]expo[\\/]virtual[\\/]env\.js$/
+const dotEnvPattern = /(^|[\\/])\.env(\.(local|(development|production)(\.local)?))?$/
+const developmentEnvFiles = [
+  '.env',
+  '.env.development',
+  '.env.local',
+  '.env.development.local',
+]
+
+export function substituteExpoVirtualEnvSource({
+  filename,
+  src,
+  projectRoot,
+  dev,
+  environment,
+}: {
+  filename: string
+  src: string
+  projectRoot: string
+  dev: boolean | undefined
+  environment: unknown
+}): string {
+  const isClientEnvironment = environment !== 'node' && environment !== 'react-server'
+
+  // parsing the virtual env is client-only, on the server process.env is used directly.
+  if (isClientEnvironment && virtualEnvPattern.test(filename)) {
+    if (dev) {
+      // variables are merged at runtime so HMR can pick up .env edits.
+      // standard Metro's Node crawler does not index `.env` because the file
+      // has no extension, so seed the module with the same public-only merge.
+      // context modules override this snapshot when the active watcher exposes
+      // the files, preserving Expo's live-update path.
+      const fileEnv: Record<string, string> = {}
+      const parseEnvFile = loadExpoParseEnvFile(projectRoot)
+      if (parseEnvFile) {
+        for (const file of developmentEnvFiles) {
+          try {
+            Object.assign(
+              fileEnv,
+              parseEnvFile(readFileSync(path.join(projectRoot, file), 'utf8'), true)
+            )
+          } catch (error) {
+            if (
+              typeof error === 'object' &&
+              error !== null &&
+              'code' in error &&
+              error.code === 'ENOENT'
+            ) {
+              continue
+            }
+            throw error
+          }
+        }
+      }
+      const relativePath = path
+        .relative(path.dirname(filename), projectRoot)
+        .split(path.sep)
+        .join('/')
+      return `const dotEnvModules = require.context(${JSON.stringify(relativePath)},false,/^\\.\\/\\.env/);\n\nexport const env = { ...process.env, ...${JSON.stringify(fileEnv)}, ...${JSON.stringify(developmentEnvFiles)}.reduce((acc, file) => {\n  const key = './' + file;\n  return { ...acc, ...(dotEnvModules.keys().includes(key) ? dotEnvModules(key)?.default : {}) };\n}, {}) };`
+    }
+    // production inlines every value at its use site, so reaching this
+    // module at all is a bug worth naming rather than silently undefined.
+    return `\nexport const env = new Proxy({}, {\n  get(target, key) {\n    throw new Error(\`Attempting to access internal environment variable "\${key}" is not supported in production bundles. Environment variables should be inlined in production by Babel.\`);\n  },\n});`
+  }
+
+  if (dotEnvPattern.test(filename)) {
+    // parse .env files to objects with Expo's own installed parser, keeping
+    // public names only in client environments. without Expo there is
+    // nothing to substitute: no preset generates the require.context import
+    // that would load a .env module, so the source passes through exactly
+    // as it did before this file existed.
+    const parseEnvFile = loadExpoParseEnvFile(projectRoot)
+    if (!parseEnvFile) {
+      return src
+    }
+    return `export default ${JSON.stringify(parseEnvFile(src, isClientEnvironment))};`
+  }
+
+  return src
+}

package/src/transformer/loadBabelConfig.ts

@@ -52,7 +52,7 @@ export const loadBabelConfig = (() => {
     if (!babelRC.extends) {
       babelRC.presets = [
         // { plugins: [transformImportMetaGlobPlugin] }, // Added to support Vite's `import.meta.glob`
-        require('babel-preset-expo'),
+        require('@react-native/babel-preset'),
       ]
     }
 

package/src/transformer/metroNativeWorker.test.ts

@@ -512,7 +512,7 @@ describe('metroNativeWorker', () => {
     expect(configDefault.defaultConfig.transformerPath).toContain('metroNativeWorker')
     expect(configDefault.defaultConfig.transformer.transformerPath).toBeUndefined()
 
-    // Opting back into babel via metroPluginOptions leaves expo's default
+    // Opting back into babel via metroPluginOptions leaves Metro's default
     // worker in the key, which is itself proof that top level is where metro
     // reads it from.
     const configOptOff = await buildMetroConfigInputFromViteConfig(mockViteConfig, {
@@ -1518,41 +1518,158 @@ describe('metro babel fallback config names', () => {
 })
 
 describe('one public env contract in the metro worker', () => {
-  it('inlines ONE_PUBLIC_ reads in dev and prod with no virtual module', () => {
+  it('inlines One and Expo public reads in dev and prod with no virtual module', () => {
     for (const isProduction of [false, true]) {
       const out = applyInlineEnvVars(
-        'export const api = process.env.ONE_PUBLIC_API;',
+        `export const values = [process.env.ONE_PUBLIC_API, process.env.EXPO_PUBLIC_API, import.meta.env.EXPO_PUBLIC_API];
+export const all = { ...import.meta.env };`,
         'env.ts',
         isProduction,
         { ONE_PUBLIC_API: 'https://api.test' }
       )
-      expect(out).toBe('export const api = "https://api.test";')
+      expect(out).toContain(
+        'export const values = ["https://api.test", "https://api.test", "https://api.test"];'
+      )
+      expect(out).toContain('"EXPO_PUBLIC_API":"https://api.test"')
       expect(out).not.toContain('expo/virtual/env')
       expect(out).not.toContain('_$$_EXPO_ENV')
     }
   })
 
-  it('rejects EXPO_PUBLIC_ reads instead of copying or ignoring them', () => {
+  it('preserves explicit conflicting values', () => {
     for (const isProduction of [false, true]) {
-      expect(() =>
-        applyInlineEnvVars(
-          'export const api = process.env.EXPO_PUBLIC_API;',
-          'env.ts',
-          isProduction,
-          {}
-        )
-      ).toThrow(/rename it to ONE_PUBLIC_\*/)
+      const out = applyInlineEnvVars(
+        'export const values = [process.env.ONE_PUBLIC_API, process.env.EXPO_PUBLIC_API];',
+        'env.ts',
+        isProduction,
+        { ONE_PUBLIC_API: 'one', EXPO_PUBLIC_API: 'expo' }
+      )
+      expect(out).toBe('export const values = ["one", "expo"];')
     }
   })
 
-  it('carries ONE_PLATFORM through the whole import.meta.env object', () => {
+  it('accepts Expo runtime feature flags that are not configured', () => {
+    const out = applyInlineEnvVars(
+      'export const useRnFetch = process.env.EXPO_PUBLIC_USE_RN_FETCH;',
+      '/app/node_modules/expo/build/winter/runtime.native.js',
+      false,
+      { EXPO_PUBLIC_USE_RN_FETCH: undefined }
+    )
+    expect(out).toBe('export const useRnFetch = undefined;')
+  })
+
+  it('carries public aliases through the whole import.meta.env object', () => {
     const out = applyInlineEnvVars(
       'export const all = { ...import.meta.env };',
       'env.ts',
       true,
-      { ONE_PLATFORM: 'android' }
+      { ONE_PUBLIC_API: 'one' }
+    )
+    expect(out).toContain('"ONE_PUBLIC_API":"one"')
+    expect(out).toContain('"EXPO_PUBLIC_API":"one"')
+  })
+})
+
+describe('optional expo virtual env', () => {
+  const virtualFilename = '/proj/node_modules/expo/virtual/env.js'
+  const virtualSource = 'export const env = process.env;'
+
+  function runFactory(
+    code: string,
+    opts: { requireImpl: (...args: any[]) => any; procEnv: Record<string, string> }
+  ) {
+    const module = { exports: {} as any }
+    vm.runInNewContext(code, {
+      __d(factory: any) {
+        factory(
+          {},
+          opts.requireImpl,
+          (v: any) => v,
+          (v: any) => v,
+          module,
+          module.exports,
+          []
+        )
+      },
+      process: { env: opts.procEnv },
+      console,
+    })
+    return module.exports
+  }
+
+  const noRequire = () => {
+    throw new Error('unexpected require call')
+  }
+
+  it('merges .env files over process.env in dev like upstream', async () => {
+    const result = await transform({}, '/proj', virtualFilename, Buffer.from(virtualSource), {
+      dev: true,
+      minify: false,
+      platform: 'ios',
+      type: 'module',
+      customTransformOptions: { environment: 'client' },
+    })
+    const code = result.output[0].data.code
+    expect(code).toContain('dotEnvModules')
+    expect(code).toContain('.env.development.local')
+    const contextModule: any = () => ({
+      default: { EXPO_PUBLIC_SENTINEL_DOTENV: 'dotenv-sentinel-value' },
+    })
+    contextModule.keys = () => ['./.env']
+    // metro lowers require.context(rel) to require(contextId, rel)
+    const requireImpl: any = (_id: unknown, _rel?: unknown) => contextModule
+    const mod = runFactory(code, {
+      requireImpl,
+      procEnv: { EXPO_PUBLIC_SENTINEL_PROC: 'proc-sentinel-value' },
+    })
+    expect(mod.env.EXPO_PUBLIC_SENTINEL_DOTENV).toBe('dotenv-sentinel-value')
+    expect(mod.env.EXPO_PUBLIC_SENTINEL_PROC).toBe('proc-sentinel-value')
+  })
+
+  it('throws a naming error in production like upstream', async () => {
+    const result = await transform({}, '/proj', virtualFilename, Buffer.from(virtualSource), {
+      dev: false,
+      minify: false,
+      platform: 'ios',
+      type: 'module',
+      customTransformOptions: { environment: 'client' },
+    })
+    const mod = runFactory(result.output[0].data.code, {
+      requireImpl: noRequire,
+      procEnv: {},
+    })
+    expect(() => mod.env.EXPO_PUBLIC_ANYTHING).toThrow(
+      'not supported in production bundles'
+    )
+  })
+
+  it('leaves .env files alone without Expo installed', async () => {
+    const result = await transform(
+      {},
+      '/proj-no-expo',
+      '/proj-no-expo/.env',
+      Buffer.from('EXPO_PUBLIC_A=1\nSECRET=2\n'),
+      {
+        dev: true,
+        minify: false,
+        platform: 'ios',
+        type: 'module',
+        customTransformOptions: { environment: 'client' },
+      }
     )
-    expect(out).toContain('"ONE_PLATFORM":"android"')
-    expect(out).not.toContain('EXPO_OS')
+    const code = result.output[0].data.code
+    expect(code).toContain('EXPO_PUBLIC_A')
+    expect(code).not.toContain('EXPO_PUBLIC_A":"1')
+  })
+
+  it('leaves the virtual module alone outside client environments', async () => {
+    const result = await transform({}, '/proj', virtualFilename, Buffer.from(virtualSource), {
+      dev: true,
+      minify: false,
+      platform: 'ios',
+      type: 'module',
+      customTransformOptions: { environment: 'react-server' },
+    })
+    expect(result.output[0].data.code).not.toContain('require.context')
   })
 })

package/src/transformer/metroNativeWorker.ts

@@ -13,6 +13,9 @@ import {
   transformHermesLoops,
   transformReactNativeCodegen,
 } from '@vxrn/compiler'
+import { withExpoPublicEnvAliases } from '@vxrn/utils/publicEnv'
+
+import { substituteExpoVirtualEnvSource } from './expoVirtualEnv'
 import { getPlatformEnv, metroPlatformToViteEnvironment } from '../env/platformEnv'
 
 /**
@@ -516,17 +519,15 @@ export function applyModuleResolverAliases(
 
 /**
  * Native port of one's `babel-plugin-inline-one-server-url` for public env.
- * Every `process.env.ONE_PUBLIC_*` read is inlined as a literal in both modes,
+ * Every `process.env.ONE_PUBLIC_*` or `process.env.EXPO_PUBLIC_*` read is
+ * inlined as a literal in both modes,
  * matching the rolldown native defines: a native runtime has no `process.env`
  * to read it back out of, and without this the reads survive into the bundle
- * and every ONE_PUBLIC_ value is undefined at runtime.
+ * and every public value is undefined at runtime.
  *
  * `process.env.ONE_SERVER_URL` is inlined in both modes, matching one's plugin:
  * it is how a native bundle knows where to fetch loader data from.
  *
- * `process.env.EXPO_PUBLIC_*` reads fail with a migration error instead of
- * being copied, ignored, or aliased.
- *
  * Both live in one pass because they are the same rewrite over the same walk,
  * and a second parse of every file is the cost this transformer exists to avoid.
  */
@@ -544,6 +545,13 @@ export function applyInlineEnvVars(
   }
   if (!parsed?.program) return code
 
+  const processPublicEnv = Object.fromEntries(
+    Object.entries(process.env).filter(
+      ([key]) => key.startsWith('ONE_PUBLIC_') || key.startsWith('EXPO_PUBLIC_')
+    )
+  )
+  const effectiveEnv = withExpoPublicEnvAliases({ ...processPublicEnv, ...env })
+
   const ms = new MagicString(code)
 
   // edits are collected rather than written straight through, because a folded
@@ -597,14 +605,12 @@ export function applyInlineEnvVars(
         return
       }
 
-      if (isProcessEnv && !isAssignmentTarget && key?.startsWith('EXPO_PUBLIC_')) {
-        throw new Error(
-          `[vxrn/metro] ${key} uses the removed expo prefix. rename it to ONE_PUBLIC_*`
-        )
-      }
-
-      if (isProcessEnv && !isAssignmentTarget && key?.startsWith('ONE_PUBLIC_')) {
-        replace(node, env[key] ?? process.env[key] ?? undefined)
+      if (
+        isProcessEnv &&
+        !isAssignmentTarget &&
+        (key?.startsWith('ONE_PUBLIC_') || key?.startsWith('EXPO_PUBLIC_'))
+      ) {
+        replace(node, effectiveEnv[key] ?? undefined)
         return
       }
 
@@ -617,21 +623,30 @@ export function applyInlineEnvVars(
         keyOf(obj.property, obj.computed) === 'env' &&
         key !== undefined
       ) {
-        replace(node, env[key])
+        replace(node, effectiveEnv[key])
         return
       }
 
       // bare `import.meta.env`, spread or passed around whole.
       if (!isAssignmentTarget && isImportMeta(obj) && key === 'env') {
-        edits.push({ start: node.start, end: node.end, text: JSON.stringify(env) })
+        edits.push({
+          start: node.start,
+          end: node.end,
+          text: JSON.stringify(effectiveEnv),
+        })
         return
       }
 
       // `process.env.X` for anything the vite env map defines. runs after the
-      // branches above so ONE_SERVER_URL and ONE_PUBLIC_* keep their own
+      // branches above so ONE_SERVER_URL and public env keep their own
       // handling.
-      if (isProcessEnv && !isAssignmentTarget && key !== undefined && key in env) {
-        replace(node, env[key])
+      if (
+        isProcessEnv &&
+        !isAssignmentTarget &&
+        key !== undefined &&
+        key in effectiveEnv
+      ) {
+        replace(node, effectiveEnv[key])
         return
       }
     }
@@ -1883,39 +1898,16 @@ export async function transform(
 
   let sourceCode = typeof data === 'string' ? data : data.toString('utf8')
 
-  // expo's own transform worker substitutes the source of two virtual files
-  // before transforming them. this worker replaces that worker outright, so
-  // without the same substitution `expo/virtual/env` stays a bare
-  // `process.env` re-export and no .env file ever reaches the bundle.
-  const environment = options.customTransformOptions?.environment
-  const isClientEnvironment = environment !== 'node' && environment !== 'react-server'
-
-  if (isClientEnvironment && /[\\/]expo[\\/]virtual[\\/]env\.js$/.test(filename)) {
-    if (options.dev) {
-      const rel = path
-        .relative(path.dirname(filename), projectRoot)
-        .split(path.sep)
-        .join('/')
-      sourceCode = `const dotEnvModules = require.context(${JSON.stringify(rel)},false,/^\\.\\/\\.env/);
-export const env = !dotEnvModules.keys().length ? process.env : { ...process.env, ...['.env', '.env.development', '.env.local', '.env.development.local'].reduce((acc, file) => {
-  return { ...acc, ...(dotEnvModules(file)?.default ?? {}) };
-}, {}) };`
-    } else {
-      // production inlines every value at its use site, so reaching this module
-      // at all is a bug worth naming rather than silently returning undefined.
-      sourceCode = `export const env = new Proxy({}, {
-  get(target, key) {
-    throw new Error(\`Attempting to access internal environment variable "\${String(key)}" is not supported in production bundles.\`);
-  },
-});`
-    }
-  } else if (
-    /(^|[\\/])\.env(\.(local|(development|production)(\.local)?))?$/.test(filename)
-  ) {
-    const { parseEnvFile } =
-      await import('@expo/metro-config/build/transform-worker/dot-env-development')
-    sourceCode = `export default ${JSON.stringify(parseEnvFile(sourceCode, isClientEnvironment))};`
-  }
+  // narrow optional Expo compatibility, shared with the babel
+  // transformer: only expo/virtual/env.js and .env files are special, and
+  // apps without Expo installed never resolve or load any Expo module.
+  sourceCode = substituteExpoVirtualEnvSource({
+    filename,
+    src: sourceCode,
+    projectRoot,
+    dev: options.dev,
+    environment: options.customTransformOptions?.environment,
+  })
 
   checkReservedStrings(sourceCode, config, options)
 

package/src/transformer/transformSync.test.ts

@@ -47,4 +47,26 @@ describe('transformSync', () => {
       )
     ).toThrow('use `importForwarding.moduleNames`')
   })
+
+  it('parses the readonly Flow interfaces shipped by React Native 0.87', () => {
+    const result = transformSync(
+      `// @flow strict
+interface Registration<TArgs> {
+  readonly context: unknown;
+  readonly listener: (...args: TArgs) => unknown;
+}
+export function readContext(registration: Registration<[]>): unknown {
+  return registration.context;
+}`,
+      {
+        filename: '/project/node_modules/react-native/EventEmitter.js',
+        babelrc: false,
+        configFile: false,
+        presets: [require('@react-native/babel-preset')],
+      },
+      { hermesParser: true }
+    )
+
+    expect(result?.code).toContain('function readContext(registration)')
+  })
 })