Skip to content

fix: Add ESM unwrapping to all CommonJS require calls #1675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kitten wants to merge 3 commits into from
Closed

fix: Add ESM unwrapping to all CommonJS require calls #1675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8362521
metro-file-map: Add ESM unwrapping to plugin and worker requires
kitten Apr 7, 2026
2faa889
metro-transform-worker: Add ESM unwrapping to babel transformer and m…
kitten Apr 7, 2026
d831001
metro: Add ESM unwrapping to asset plugin requires
kitten Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/metro-file-map/src/plugins/DependencyPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ export default class DependencyPlugin
if (this.#dependencyExtractor != null) {
// Dynamic require to get extractor's cache key
// $FlowFixMe[unsupported-syntax] - dynamic require
const extractor = require(this.#dependencyExtractor);
const mod = require(this.#dependencyExtractor);
const extractor =
mod.__esModule === true && 'default' in mod ? mod.default : mod;
Comment on lines +80 to +81

@kitten kitten May 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spotted on a re-review that getCacheKey below means that we should be doing:

const getCacheKey =
  mod?.getCacheKey ??
  (mod.__esModule === true && 'default' in mod ? mod.default : mod).getCacheKey;

return JSON.stringify({
extractorKey: extractor.getCacheKey?.() ?? null,
extractorPath: this.#dependencyExtractor,
Expand Down
4 changes: 3 additions & 1 deletion packages/metro-file-map/src/plugins/dependencies/worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ module.exports = class DependencyExtractorWorker /*:: implements MetadataWorker
) {
if (dependencyExtractor != null) {
// $FlowFixMe[unsupported-syntax] - dynamic require
this.#dependencyExtractor = require(dependencyExtractor);
const mod = require(dependencyExtractor);
this.#dependencyExtractor =
mod.__esModule === true && 'default' in mod ? mod.default : mod;
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/metro-file-map/src/plugins/haste/worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ module.exports = class Worker /*:: implements MetadataWorker */ {
) {
if (hasteImplModulePath != null) {
// $FlowFixMe[unsupported-syntax] - dynamic require
this.#hasteImpl = require(hasteImplModulePath);
const mod = require(hasteImplModulePath);
this.#hasteImpl =
mod.__esModule === true && 'default' in mod ? mod.default : mod;
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/metro-file-map/src/worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ class Worker {
constructor({plugins = []} /*: WorkerSetupArgs */) {
this.#plugins = plugins.map(({modulePath, setupArgs}) => {
// $FlowFixMe[unsupported-syntax] - dynamic require
const PluginWorker = require(modulePath);
const mod = require(modulePath);
const PluginWorker =
mod.__esModule === true && 'default' in mod ? mod.default : mod;
return new PluginWorker(setupArgs);
});
}
Expand Down
4 changes: 3 additions & 1 deletion packages/metro-transform-worker/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,9 @@ async function transformJSWithBabel(
): Promise<TransformResponse> {
const {babelTransformerPath} = context.config;
// $FlowFixMe[unsupported-syntax] dynamic require
const transformer: BabelTransformer = require(babelTransformerPath);
const mod = require(babelTransformerPath);
const transformer: BabelTransformer =
mod.__esModule === true && 'default' in mod ? mod.default : mod;

const transformResult = await transformer.transform(
getBabelTransformArgs(file, context, [
Expand Down
3 changes: 2 additions & 1 deletion packages/metro-transform-worker/src/utils/getMinifier.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ export default function getMinifier(minifierPath: string): Minifier {
// any entry point that accepts them...
try {
// $FlowFixMe[unsupported-syntax] TODO t0 cannot do require with literal
return require(minifierPath);
const mod = require(minifierPath);
return mod.__esModule === true && 'default' in mod ? mod.default : mod;
} catch (e) {
throw new Error(
'A problem occurred while trying to fetch the minifier. Path: "' +
Expand Down
5 changes: 4 additions & 1 deletion packages/metro/src/Assets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,10 @@ async function applyAssetDataPlugins(

const [currentAssetPlugin, ...remainingAssetPlugins] = assetDataPlugins;
// $FlowFixMe[unsupported-syntax]: impossible to type a dynamic require.
const assetPluginFunction: AssetDataPlugin = require(currentAssetPlugin);
const mod = require(currentAssetPlugin);
const assetPluginFunction: AssetDataPlugin =
mod.__esModule === true && 'default' in mod ? mod.default : mod;

const resultAssetData = await assetPluginFunction(assetData);
return await applyAssetDataPlugins(remainingAssetPlugins, resultAssetData);
}
Expand Down
Loading