fix: esm files should use .mjs extention #3159

ScriptedAlchemy · 2024-11-02T00:10:01Z

Description

make esm files emit with .mjs extention

Related Issue

module-federation/vite#163 (comment)

Types of changes

Docs change / refactoring / dependency upgrade
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Checklist

I have added tests to cover my changes.
All new and existing tests passed.
I have updated the documentation.

changeset-bot · 2024-11-02T00:10:06Z

🦋 Changeset detected

Latest commit: de79650

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 25 packages

Name	Type
@module-federation/webpack-bundler-runtime	Patch
@module-federation/data-prefetch	Patch
@module-federation/runtime-tools	Patch
@module-federation/managers	Patch
@module-federation/manifest	Patch
@module-federation/runtime	Patch
@module-federation/sdk	Patch
@module-federation/enhanced	Patch
@module-federation/nextjs-mf	Patch
@module-federation/rspack	Patch
@module-federation/dts-plugin	Patch
@module-federation/modern-js	Patch
@module-federation/devtools	Patch
@module-federation/node	Patch
@module-federation/retry-plugin	Patch
@module-federation/esbuild	Patch
@module-federation/rsbuild-plugin	Patch
@module-federation/storybook-addon	Patch
@module-federation/utilities	Patch
@module-federation/bridge-react-webpack-plugin	Patch
@module-federation/bridge-react	Patch
@module-federation/bridge-vue3	Patch
@module-federation/modernjsapp	Patch
@module-federation/third-party-dts-extractor	Patch
@module-federation/bridge-shared	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2024-11-02T00:10:22Z

✅ Deploy Preview for module-federation-docs ready!

Name	Link
🔨 Latest commit	`de79650`
🔍 Latest deploy log	https://app.netlify.com/sites/module-federation-docs/deploys/6729968db0b7bd0008b43bd0
😎 Deploy Preview	https://deploy-preview-3159--module-federation-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

squadronai

Summary

The core changes in this pull request focus on updating the file extensions used for ESM (ECMAScript Module) files in the module federation codebase. The changes ensure that ESM files use the correct .mjs extension, which addresses an issue where the incorrect .cjs extension was being used.

The changes include:

Updating the file extension for ESM files in the FederationRuntimePlugin.ts file from .cjs to .mjs.
Changing the import path for the @module-federation/runtime package to use the .mjs file extension instead of .esm.js in the ModuleFederationPlugin.ts file.

These changes help to improve the integration of the module federation functionality with the existing codebase and ensure that ESM files are properly recognized and used in the module federation runtime.

File Summaries

File	Summary
packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts	The code changes update the file extension for ESM (ECMAScript Module) files from `.cjs` to `.mjs`. This ensures that the ESM files are properly identified and used in the module federation runtime, addressing an issue where the incorrect file extension was being used.
packages/rspack/src/ModuleFederationPlugin.ts	The changes in this file update the import path for the `@module-federation/runtime` package to use the `.mjs` file extension instead of `.esm.js`. This ensures that the ESM (ECMAScript Module) files are properly recognized and used in the module federation setup.

squadronai

Incremental Review

Comments posted: 2

Configuration

Squadron Mode: essential

Commits Reviewed

680fc9e06e962ea988525a2ce4a5c9bff92ed08b...7715b994791ebb4b4cd2f9ed70781f9deeb4a02b

Files Reviewed

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts
packages/rspack/src/ModuleFederationPlugin.ts

Files Ignored

These files were ignored due to the filter in the squadron.yaml file.

.changeset/popular-pillows-draw.md
packages/data-prefetch/package.json
packages/data-prefetch/rollup.config.js
packages/data-prefetch/src/cli/index.ts
packages/managers/rollup.config.js
packages/manifest/rollup.config.js
packages/runtime-tools/package.json
packages/runtime-tools/rollup.config.js
packages/runtime/package.json
packages/runtime/rollup.config.js
packages/sdk/package.json
packages/sdk/rollup.config.js
packages/webpack-bundler-runtime/package.json
packages/webpack-bundler-runtime/rollup.config.js
pnpm-lock.yaml

# Conflicts: # packages/data-prefetch/rollup.config.js # packages/runtime-tools/rollup.config.js # packages/runtime/rollup.config.js # packages/sdk/rollup.config.js # packages/webpack-bundler-runtime/rollup.config.js # pnpm-lock.yaml

squadronai

Incremental Review

Comments posted: 4

Configuration

Squadron Mode: essential

Commits Reviewed

083af4ba6aa3c563267fe0a17f846a86ccde4476...c56143fc51bd3c2cec1a37f6d6ea2a13036a2783

Files Reviewed

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts
packages/rspack/src/ModuleFederationPlugin.ts

Files Ignored

These files were ignored due to the filter in the squadron.yaml file.

.changeset/popular-pillows-draw.md
packages/data-prefetch/package.json
packages/data-prefetch/rollup.config.js
packages/data-prefetch/src/cli/index.ts
packages/runtime-tools/package.json
packages/runtime-tools/rollup.config.js
packages/runtime/package.json
packages/runtime/rollup.config.js
packages/sdk/package.json
packages/sdk/rollup.config.js
packages/webpack-bundler-runtime/package.json
packages/webpack-bundler-runtime/rollup.config.js

squadronai

Incremental Review

Comments posted: 4

Configuration

Squadron Mode: essential

Commits Reviewed

0b44ffae88fd261128629a015d63c65f3699da5a...de79650bd174c22b3245b02186461a799a72b772

Files Reviewed

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts
packages/rspack/src/ModuleFederationPlugin.ts

Files Ignored

These files were ignored due to the filter in the squadron.yaml file.

.changeset/popular-pillows-draw.md
packages/data-prefetch/package.json
packages/data-prefetch/rollup.config.js
packages/data-prefetch/src/cli/index.ts
packages/runtime-tools/package.json
packages/runtime-tools/rollup.config.js
packages/runtime/package.json
packages/runtime/rollup.config.js
packages/sdk/package.json
packages/sdk/rollup.config.js
packages/webpack-bundler-runtime/package.json
packages/webpack-bundler-runtime/rollup.config.js

squadronai · 2024-11-05T03:53:08Z

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts

    if (isHoisted) {
-      runtimePath = runtimePath.replace('.cjs', '.esm');
+      runtimePath = runtimePath.replace('.cjs.js', '.esm.mjs');


The string replacement for file extension is brittle and could fail if the path doesn't contain '.cjs.js'. A more robust approach would be:

Suggested change

if (isHoisted) {

runtimePath = runtimePath.replace('.cjs', '.esm');

runtimePath = runtimePath.replace('.cjs.js', '.esm.mjs');

runtimePath = runtimePath.replace(/\.cjs\.js$/, '.esm.mjs');

This ensures we only replace at the end of the string and handles cases where '.cjs.js' might appear elsewhere in the path.

squadronai · 2024-11-05T03:53:08Z

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts

    if (this.options?.experiments?.federationRuntime === 'hoisted') {
      this.bundlerRuntimePath = this.bundlerRuntimePath.replace(
        '.cjs.js',
-        '.esm.js',
+        '.esm.mjs',
      );


Similar to the previous suggestion, the extension replacement here should be more precise:

Suggested change

if (this.options?.experiments?.federationRuntime === 'hoisted') {

this.bundlerRuntimePath = this.bundlerRuntimePath.replace(

'.cjs.js',

'.esm.js',

'.esm.mjs',

);

this.bundlerRuntimePath = this.bundlerRuntimePath.replace(

/\.cjs\.js$/,

'.esm.mjs',

);

squadronai · 2024-11-05T03:53:08Z

packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts

          if (/webpack-bundler-runtime/.test(resolveData.contextInfo.issuer)) {
-            resolveData.request = RuntimePath.replace('cjs', 'esm');
+            resolveData.request = RuntimePath.replace('cjs.js', 'esm.mjs');


The extension replacement here is also brittle. Consider using a more robust approach:

Suggested change

if (/webpack-bundler-runtime/.test(resolveData.contextInfo.issuer)) {

resolveData.request = RuntimePath.replace('cjs', 'esm');

resolveData.request = RuntimePath.replace('cjs.js', 'esm.mjs');

resolveData.request = RuntimePath.replace(/\.cjs\.js$/, '.esm.mjs');

squadronai · 2024-11-05T03:53:08Z

packages/rspack/src/ModuleFederationPlugin.ts

    const runtimeESMPath = require.resolve(
-      '@module-federation/runtime/dist/index.esm.js',
+      '@module-federation/runtime/dist/index.esm.mjs',
      { paths: [options.implementation] },
    );


The path resolution for the ESM runtime file correctly uses the .mjs extension, which aligns with the Node.js ESM specification. However, to make the code more resilient to potential path resolution issues, consider adding error handling:

Suggested change

const runtimeESMPath = require.resolve(

'@module-federation/runtime/dist/index.esm.js',

'@module-federation/runtime/dist/index.esm.mjs',

{ paths: [options.implementation] },

);

const runtimeESMPath = (() => {

try {

return require.resolve(

'@module-federation/runtime/dist/index.esm.mjs',

{ paths: [options.implementation] },

);

} catch (error) {

throw new Error(`Failed to resolve ESM runtime path: ${error.message}`);

}

})();

This change adds proper error handling and provides a more descriptive error message if the runtime file cannot be resolved, which can help with debugging deployment issues.

ScriptedAlchemy and others added 4 commits October 31, 2024 12:02

build: disable hoistTransitiveImports for better tree shake

b36d506

Merge branch 'main' into disable-trans-import-hoist

49d5843

chore(webpack-bundler-runtime): do not split chunks of package

328c2aa

build: esm output should emit mjs not js

49b261a

ScriptedAlchemy mentioned this pull request Nov 2, 2024

SvelteKit: 'SyntaxError: Cannot use import statement outside a module' module-federation/vite#163

Open

ScriptedAlchemy changed the title ~~Output mjs~~ fix: esm files should use .mjs extention Nov 2, 2024

github-actions bot added the change: fix label Nov 2, 2024

Merge branch 'main' into output-mjs

f9ed585

ScriptedAlchemy force-pushed the output-mjs branch from e60e427 to f9ed585 Compare November 2, 2024 00:11

chore: locks

680fc9e

ScriptedAlchemy force-pushed the output-mjs branch from ed48cd5 to 680fc9e Compare November 2, 2024 00:14

ScriptedAlchemy requested review from zhoushaw and 2heal1 November 2, 2024 00:14

squadronai bot reviewed Nov 2, 2024

View reviewed changes

fix: update references to .mjs not .js for esm

9c0f334

ScriptedAlchemy force-pushed the output-mjs branch from 7715b99 to 9c0f334 Compare November 2, 2024 21:15

module-federation deleted a comment from squadronai bot Nov 4, 2024

ScriptedAlchemy and others added 2 commits November 4, 2024 14:53

Merge branch 'main' into output-mjs

faa7c33

# Conflicts: # packages/data-prefetch/rollup.config.js # packages/runtime-tools/rollup.config.js # packages/runtime/rollup.config.js # packages/sdk/rollup.config.js # packages/webpack-bundler-runtime/rollup.config.js # pnpm-lock.yaml

Merge branch 'main' into output-mjs

c56143f

squadronai bot reviewed Nov 4, 2024

View reviewed changes

2heal1 approved these changes Nov 5, 2024

View reviewed changes

module-federation deleted a comment from squadronai bot Nov 5, 2024

Merge branch 'main' into output-mjs

de79650

squadronai bot reviewed Nov 5, 2024

View reviewed changes

ScriptedAlchemy merged commit 206b56d into main Nov 5, 2024
17 checks passed

ScriptedAlchemy deleted the output-mjs branch November 5, 2024 04:08

2heal1 mentioned this pull request Nov 5, 2024

Release v0.7.0 #3181

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: esm files should use .mjs extention #3159

fix: esm files should use .mjs extention #3159

ScriptedAlchemy commented Nov 2, 2024 •

edited

Loading

changeset-bot bot commented Nov 2, 2024 •

edited

Loading

netlify bot commented Nov 2, 2024 •

edited

Loading

squadronai bot left a comment •

edited

Loading

squadronai bot left a comment

squadronai bot left a comment

squadronai bot left a comment

squadronai bot Nov 5, 2024

squadronai bot Nov 5, 2024

squadronai bot Nov 5, 2024

squadronai bot Nov 5, 2024

fix: esm files should use .mjs extention #3159

fix: esm files should use .mjs extention #3159

Conversation

ScriptedAlchemy commented Nov 2, 2024 • edited Loading

Description

Related Issue

Types of changes

Checklist

changeset-bot bot commented Nov 2, 2024 • edited Loading

🦋 Changeset detected

netlify bot commented Nov 2, 2024 • edited Loading

✅ Deploy Preview for module-federation-docs ready!

squadronai bot left a comment • edited Loading

Choose a reason for hiding this comment

Summary

squadronai bot left a comment

Choose a reason for hiding this comment

Incremental Review

squadronai bot left a comment

Choose a reason for hiding this comment

Incremental Review

squadronai bot left a comment

Choose a reason for hiding this comment

Incremental Review

squadronai bot Nov 5, 2024

Choose a reason for hiding this comment

squadronai bot Nov 5, 2024

Choose a reason for hiding this comment

squadronai bot Nov 5, 2024

Choose a reason for hiding this comment

squadronai bot Nov 5, 2024

Choose a reason for hiding this comment

ScriptedAlchemy commented Nov 2, 2024 •

edited

Loading

changeset-bot bot commented Nov 2, 2024 •

edited

Loading

netlify bot commented Nov 2, 2024 •

edited

Loading

squadronai bot left a comment •

edited

Loading