fix(metro-core): improve Windows metro runtime compatibility

.changeset/fair-eels-grab.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/metro': patch
+---
+
+fix Metro Windows compatibility by normalizing path handling and source URL generation across absolute and relative entry paths, and tighten expose key resolution to avoid incorrect extension fallback matches.

.github/workflows/e2e-metro.yml

@@ -155,6 +155,46 @@ jobs:
           name: maestro-logs-android-${{ env.METRO_APP_NAME }}
           path: ~/.maestro/tests/
 
+  e2e-metro-windows:
+    needs: e2e-metro-check-affected
+    if: needs.e2e-metro-check-affected.outputs.should_run_e2e == 'true'
+    runs-on: windows-latest
+    timeout-minutes: 30
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+
+      - name: Export SKIP_DEVTOOLS_POSTINSTALL
+        run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> "$GITHUB_ENV"
+        shell: bash
+
+      - name: Install pnpm dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Metro packages
+        run: npx nx run-many --targets=build --projects=metro-core,metro-plugin-rnc-cli,metro-plugin-rnef --parallel=2
+
+      - name: Test Metro packages
+        run: npx nx run-many --targets=test --projects=metro-core,metro-plugin-rnc-cli --parallel=2
+
+      - name: Build Metro example remotes for iOS
+        run: pnpm --filter example-mini --filter example-nested-mini run build:ios
+
+      - name: Build Metro example remotes for Android
+        run: pnpm --filter example-mini --filter example-nested-mini run build:android
+
   e2e-metro-ios:
     needs: e2e-metro-check-affected
     if: needs.e2e-metro-check-affected.outputs.should_run_e2e == 'true'

apps/metro-example-host/jest.config.js

@@ -1,3 +1,9 @@
 module.exports = {
   preset: 'react-native',
+  transformIgnorePatterns: [
+    'node_modules[\\\\/](?!.*(react-native|@react-native)[\\\\/])',
+  ],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', {configFile: './babel.config.js'}],
+  },
 };

apps/metro-example-mini/jest.config.js

@@ -1,3 +1,9 @@
 module.exports = {
   preset: 'react-native',
+  transformIgnorePatterns: [
+    'node_modules[\\\\/](?!.*(react-native|@react-native)[\\\\/])',
+  ],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', {configFile: './babel.config.js'}],
+  },
 };

apps/metro-example-nested-mini/jest.config.js

@@ -1,3 +1,9 @@
 module.exports = {
   preset: 'react-native',
+  transformIgnorePatterns: [
+    'node_modules[\\\\/](?!.*(react-native|@react-native)[\\\\/])',
+  ],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', {configFile: './babel.config.js'}],
+  },
 };

packages/metro-core/__tests__/commands/utils/path-utils.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import {
+  normalizeOutputRelativePath,
+  toFileSourceUrl,
+} from '../../../src/commands/utils/path-utils';
+
+describe('commands path utils', () => {
+  it('normalizes relative output paths to posix separators', () => {
+    expect(normalizeOutputRelativePath('shared\\lodash.bundle')).toBe(
+      'shared/lodash.bundle',
+    );
+  });
+
+  it('builds file urls from normalized relative paths', () => {
+    const parsed = new URL(toFileSourceUrl('exposed\\info.bundle'));
+    expect(parsed.protocol).toBe('file:');
+    expect(parsed.search).toBe('');
+    expect(parsed.hash).toBe('');
+    expect(parsed.pathname.endsWith('/exposed/info.bundle')).toBe(true);
+  });
+
+  it('encodes reserved characters as pathname segments', () => {
+    const hashParsed = new URL(toFileSourceUrl('shared/#hash.bundle'));
+    expect(hashParsed.hash).toBe('');
+    expect(hashParsed.pathname.endsWith('/shared/%23hash.bundle')).toBe(true);
+
+    const queryParsed = new URL(toFileSourceUrl('shared/?query.bundle'));
+    expect(queryParsed.search).toBe('');
+    expect(queryParsed.pathname.endsWith('/shared/%3Fquery.bundle')).toBe(true);
+
+    const percentParsed = new URL(toFileSourceUrl('shared/%25literal.bundle'));
+    expect(percentParsed.pathname.endsWith('/shared/%2525literal.bundle')).toBe(
+      true,
+    );
+  });
+});

packages/metro-core/__tests__/plugin/babel-transformer.spec.ts

@@ -0,0 +1,62 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { vol } from 'memfs';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createBabelTransformer } from '../../src/plugin/babel-transformer';
+import type { ModuleFederationConfigNormalized } from '../../src/types';
+
+function createConfig(): ModuleFederationConfigNormalized {
+  return {
+    name: 'test-app',
+    filename: 'remote.js',
+    remotes: {},
+    exposes: {},
+    shared: {},
+    shareStrategy: 'loaded-first',
+    plugins: [],
+  };
+}
+
+describe('createBabelTransformer', () => {
+  afterEach(() => {
+    vol.reset();
+    vi.restoreAllMocks();
+  });
+
+  it('escapes Windows paths for require()', () => {
+    const realReadFileSync = fs.readFileSync.bind(fs);
+    vi.spyOn(fs, 'readFileSync').mockImplementation(((filePath, options) => {
+      const targetPath = filePath.toString();
+      if (vol.existsSync(targetPath)) {
+        return vol.readFileSync(targetPath, options as never);
+      }
+      return realReadFileSync(filePath, options as never);
+    }) as typeof fs.readFileSync);
+    vi.spyOn(fs, 'writeFileSync').mockImplementation(((
+      filePath,
+      data,
+      options,
+    ) => {
+      const targetPath = filePath.toString();
+      vol.mkdirSync(path.dirname(targetPath), { recursive: true });
+      vol.writeFileSync(targetPath, data, options as never);
+    }) as typeof fs.writeFileSync);
+
+    const tmpDirPath = path.join('/virtual', '.mf');
+    vol.mkdirSync(tmpDirPath, { recursive: true });
+    const windowsPath =
+      'C:\\Users\\someone\\project\\node_modules\\metro-babel-transformer\\src\\index.js';
+
+    const outputPath = createBabelTransformer({
+      blacklistedPaths: [],
+      federationConfig: createConfig(),
+      originalBabelTransformerPath: windowsPath,
+      tmpDirPath,
+      enableInitializeCorePatching: false,
+      enableRuntimeRequirePatching: false,
+    });
+
+    const output = fs.readFileSync(outputPath, 'utf-8');
+    expect(output).toContain(`require(${JSON.stringify(windowsPath)})`);
+  });
+});

packages/metro-core/__tests__/plugin/helpers.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { toPosixPath } from '../../src/plugin/helpers';
+
+describe('toPosixPath', () => {
+  it('converts backslashes to forward slashes', () => {
+    expect(toPosixPath('C:\\Users\\someone\\project\\src\\index.js')).toBe(
+      'C:/Users/someone/project/src/index.js',
+    );
+  });
+
+  it('leaves posix paths unchanged', () => {
+    expect(toPosixPath('/usr/local/bin')).toBe('/usr/local/bin');
+  });
+});

packages/metro-core/__tests__/plugin/normalize-options.spec.ts

@@ -7,6 +7,7 @@ vi.mock('node:fs', () => {
   return { ...memfs, default: memfs };
 });
 
+import { toPosixPath } from '../../src/plugin/helpers';
 import { normalizeOptions } from '../../src/plugin/normalize-options';
 
 let projectCount = 0;
@@ -69,8 +70,8 @@ describe('normalizeOptions', () => {
       '../../src/modules/metroCorePlugin.ts',
     );
     expect(normalized.plugins).toEqual([
-      path.relative(tmpDirPath, metroCorePluginPath),
-      path.relative(tmpDirPath, runtimePluginPath),
+      toPosixPath(path.relative(tmpDirPath, metroCorePluginPath)),
+      toPosixPath(path.relative(tmpDirPath, runtimePluginPath)),
     ]);
   });
 
@@ -104,9 +105,9 @@ describe('normalizeOptions', () => {
       '../../src/modules/metroCorePlugin.ts',
     );
     expect(normalized.plugins).toEqual([
-      path.relative(tmpDirPath, metroCorePluginPath),
-      path.relative(tmpDirPath, runtimePluginPath),
-      path.relative(tmpDirPath, runtimePluginTwoPath),
+      toPosixPath(path.relative(tmpDirPath, metroCorePluginPath)),
+      toPosixPath(path.relative(tmpDirPath, runtimePluginPath)),
+      toPosixPath(path.relative(tmpDirPath, runtimePluginTwoPath)),
     ]);
   });
 });

packages/metro-core/__tests__/plugin/rewrite-request.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { createRewriteRequest } from '../../src/plugin/rewrite-request';
+
+describe('createRewriteRequest', () => {
+  it('normalizes manifest rewrite paths to posix separators', () => {
+    const rewriteRequest = createRewriteRequest({
+      config: {
+        projectRoot: 'C:\\repo\\app',
+        server: {},
+      } as any,
+      originalEntryFilename: 'index.js',
+      remoteEntryFilename: 'mini.bundle',
+      manifestPath: 'C:\\repo\\app\\node_modules\\.mf\\mf-manifest.json',
+      tmpDirPath: 'C:\\repo\\app\\node_modules\\.mf',
+    });
+
+    expect(rewriteRequest('/mf-manifest.json')).toBe(
+      '/[metro-project]/node_modules/.mf/mf-manifest.json',
+    );
+  });
+});

packages/metro-core/__tests__/plugin/serializer.spec.ts

@@ -0,0 +1,112 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ConfigError } from '../../src/utils/errors';
+
+vi.mock('../../src/utils/metro-compat', () => {
+  const baseJSBundle = vi.fn(() => ({ mocked: true }));
+
+  return {
+    CountingSet: class CountingSet<T> extends Set<T> {},
+    baseJSBundle,
+    bundleToString: vi.fn(() => ({ code: 'serialized-output' })),
+  };
+});
+
+import { getModuleFederationSerializer } from '../../src/plugin/serializer';
+import { baseJSBundle } from '../../src/utils/metro-compat';
+
+function createSerializer(exposes: Record<string, string>) {
+  return getModuleFederationSerializer(
+    {
+      name: 'MFExampleMini',
+      filename: 'mini.bundle',
+      remotes: {},
+      exposes,
+      shared: {},
+      shareStrategy: 'loaded-first',
+      plugins: [],
+    },
+    true,
+  );
+}
+
+function createSerializerOptions(projectRoot = '/projectRoot') {
+  return {
+    runModule: false,
+    modulesOnly: true,
+    projectRoot,
+  } as any;
+}
+
+function createGraph() {
+  return {
+    dependencies: new Map(),
+  } as any;
+}
+
+describe('getModuleFederationSerializer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('matches expose paths when the entry path contains backslashes', async () => {
+    const serializer = createSerializer({ './info': './src/info.tsx' });
+
+    await expect(
+      serializer(
+        '/projectRoot/src\\info.tsx',
+        [],
+        createGraph(),
+        createSerializerOptions(),
+      ),
+    ).resolves.toBe('serialized-output');
+    expect(baseJSBundle).toHaveBeenCalledTimes(1);
+  });
+
+  it('matches expose paths without extension against resolved entry files', async () => {
+    const serializer = createSerializer({ './info': './src/info' });
+
+    await expect(
+      serializer(
+        '/projectRoot/src/info.tsx',
+        [],
+        createGraph(),
+        createSerializerOptions(),
+      ),
+    ).resolves.toBe('serialized-output');
+    expect(baseJSBundle).toHaveBeenCalledTimes(1);
+  });
+
+  it('prefers exact expose path match over extensionless fallback', async () => {
+    const serializer = createSerializer({
+      './js': './src/info.js',
+      './tsx': './src/info.tsx',
+    });
+
+    await expect(
+      serializer(
+        '/projectRoot/src/info.tsx',
+        [],
+        createGraph(),
+        createSerializerOptions(),
+      ),
+    ).resolves.toBe('serialized-output');
+    expect(baseJSBundle).toHaveBeenCalledTimes(1);
+
+    const preModules = vi.mocked(baseJSBundle).mock.calls[0][1] as any[];
+    expect(preModules[0].output[0].data.code).toContain('["exposed/tsx"]');
+    expect(preModules[1].output[0].data.code).toContain('["exposed/tsx"]');
+  });
+
+  it('throws a config error when no expose entry matches', async () => {
+    const serializer = createSerializer({ './other': './src/other.tsx' });
+
+    await expect(
+      serializer(
+        '/projectRoot/src/info.tsx',
+        [],
+        createGraph(),
+        createSerializerOptions(),
+      ),
+    ).rejects.toBeInstanceOf(ConfigError);
+  });
+});