fix: esm files should use .mjs extention (#3159)

module-federation · Nov 5, 2024 · 206b56d · 206b56d
1 parent 54bfd1c
commit 206b56d
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 28 deletions.
diff --git a/.changeset/popular-pillows-draw.md b/.changeset/popular-pillows-draw.md
@@ -0,0 +1,11 @@
+---
+'@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
+---
+
+disable hoistTransitiveImports for better tree shake
diff --git a/packages/data-prefetch/package.json b/packages/data-prefetch/package.json
@@ -13,27 +13,27 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs",
       "types": "./dist/index.cjs.d.ts"
     },
     "./react": {
-      "import": "./dist/react.esm.js",
+      "import": "./dist/react.esm.mjs",
       "require": "./dist/react.cjs.js",
       "types": "./dist/react.cjs.d.ts"
     },
     "./cli": {
-      "import": "./dist/cli.esm.js",
+      "import": "./dist/cli.esm.mjs",
       "require": "./dist/cli.cjs.js",
       "types": "./dist/cli.cjs.d.ts"
     },
     "./babel-plugin": {
-      "import": "./dist/babel.esm.js",
+      "import": "./dist/babel.esm.mjs",
       "require": "./dist/babel.cjs.js",
       "types": "./dist/babel.cjs.d.ts"
     },
     "./universal": {
-      "import": "./dist/universal.esm.js",
+      "import": "./dist/universal.esm.mjs",
       "require": "./dist/universal.cjs.js",
       "types": "./dist/universal.cjs.d.ts"
     }
@@ -58,7 +58,7 @@
     }
   },
   "main": "dist/index.cjs",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.esm.mjs",
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"

diff --git a/packages/data-prefetch/rollup.config.js b/packages/data-prefetch/rollup.config.js
@@ -29,6 +29,14 @@ module.exports = (rollupConfig, _projectOptions) => {
         }
       },
       hoistTransitiveImports: false,
+      entryFileNames:
+        c.format === 'esm'
+          ? c.entryFileNames.replace('.js', '.mjs')
+          : c.entryFileNames,
+      chunkFileNames:
+        c.format === 'esm'
+          ? c.chunkFileNames.replace('.js', '.mjs')
+          : c.chunkFileNames,
     }));
   } else {
     rollupConfig.output = {
@@ -39,6 +47,14 @@ module.exports = (rollupConfig, _projectOptions) => {
         }
       },
       hoistTransitiveImports: false,
+      entryFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.entryFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.entryFileNames,
+      chunkFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.chunkFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.chunkFileNames,
     };
   }
 

diff --git a/packages/data-prefetch/src/cli/index.ts b/packages/data-prefetch/src/cli/index.ts
@@ -48,7 +48,7 @@ export class PrefetchPlugin implements WebpackPluginInstance {
       this.options.runtimePlugins = [];
     }
 
-    const runtimePath = path.resolve(__dirname, './plugin.esm.js');
+    const runtimePath = path.resolve(__dirname, './plugin.esm.mjs');
     if (!this.options.runtimePlugins?.includes(runtimePath)) {
       this.options.runtimePlugins!.push(runtimePath);
     }

diff --git a/packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts b/packages/enhanced/src/lib/container/runtime/FederationRuntimePlugin.ts
@@ -371,7 +371,7 @@ class FederationRuntimePlugin {
     }
 
     if (isHoisted) {
-      runtimePath = runtimePath.replace('.cjs', '.esm');
+      runtimePath = runtimePath.replace('.cjs.js', '.esm.mjs');
     }
 
     const alias: any = compiler.options.resolve.alias || {};
@@ -439,7 +439,7 @@ class FederationRuntimePlugin {
     if (this.options?.experiments?.federationRuntime === 'hoisted') {
       this.bundlerRuntimePath = this.bundlerRuntimePath.replace(
         '.cjs.js',
-        '.esm.js',
+        '.esm.mjs',
       );
 
       new EmbedFederationRuntimePlugin().apply(compiler);
@@ -450,7 +450,7 @@ class FederationRuntimePlugin {
         /@module-federation\/runtime/,
         (resolveData) => {
           if (/webpack-bundler-runtime/.test(resolveData.contextInfo.issuer)) {
-            resolveData.request = RuntimePath.replace('cjs', 'esm');
+            resolveData.request = RuntimePath.replace('cjs.js', 'esm.mjs');
 
             if (resolveData.createData) {
               resolveData.createData.request = resolveData.request;

diff --git a/packages/rspack/src/ModuleFederationPlugin.ts b/packages/rspack/src/ModuleFederationPlugin.ts
@@ -99,7 +99,7 @@ export class ModuleFederationPlugin implements RspackPluginInstance {
     ).apply(compiler);
 
     const runtimeESMPath = require.resolve(
-      '@module-federation/runtime/dist/index.esm.js',
+      '@module-federation/runtime/dist/index.esm.mjs',
       { paths: [options.implementation] },
     );
 

diff --git a/packages/runtime-tools/package.json b/packages/runtime-tools/package.json
@@ -3,7 +3,7 @@
   "version": "0.6.16",
   "author": "zhanghang <[email protected]>",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.esm.mjs",
   "types": "./dist/index.cjs.d.ts",
   "license": "MIT",
   "publishConfig": {
@@ -12,17 +12,17 @@
   "exports": {
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs.js"
     },
     "./runtime": {
       "types": "./dist/runtime.cjs.d.ts",
-      "import": "./dist/runtime.esm.js",
+      "import": "./dist/runtime.esm.mjs",
       "require": "./dist/runtime.cjs.js"
     },
     "./webpack-bundler-runtime": {
       "types": "./dist/webpack-bundler-runtime.cjs.d.ts",
-      "import": "./dist/webpack-bundler-runtime.esm.js",
+      "import": "./dist/webpack-bundler-runtime.esm.mjs",
       "require": "./dist/webpack-bundler-runtime.cjs.js"
     },
     "./*": "./*"

diff --git a/packages/runtime-tools/rollup.config.js b/packages/runtime-tools/rollup.config.js
@@ -11,11 +11,27 @@ module.exports = (rollupConfig) => {
     rollupConfig.output = rollupConfig.output.map((c) => ({
       ...c,
       hoistTransitiveImports: false,
+      entryFileNames:
+        c.format === 'esm'
+          ? c.entryFileNames.replace('.js', '.mjs')
+          : c.entryFileNames,
+      chunkFileNames:
+        c.format === 'esm'
+          ? c.chunkFileNames.replace('.js', '.mjs')
+          : c.chunkFileNames,
     }));
   } else {
     rollupConfig.output = {
       ...rollupConfig.output,
       hoistTransitiveImports: false,
+      entryFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.entryFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.entryFileNames,
+      chunkFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.chunkFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.chunkFileNames,
     };
   }
 

diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -3,7 +3,7 @@
   "version": "0.6.16",
   "author": "zhouxiao <[email protected]>",
   "main": "./dist/index.cjs.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.esm.mjs",
   "types": "./dist/index.cjs.d.ts",
   "license": "MIT",
   "publishConfig": {
@@ -16,22 +16,22 @@
   "exports": {
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs.js"
     },
     "./helpers": {
       "types": "./dist/helpers.cjs.d.ts",
-      "import": "./dist/helpers.esm.js",
+      "import": "./dist/helpers.esm.mjs",
       "require": "./dist/helpers.cjs.js"
     },
     "./types": {
       "types": "./dist/types.cjs.d.ts",
-      "import": "./dist/types.esm.js",
+      "import": "./dist/types.esm.mjs",
       "require": "./dist/types.cjs.js"
     },
     "./embedded": {
       "types": "./dist/embedded.cjs.d.ts",
-      "import": "./dist/embedded.esm.js",
+      "import": "./dist/embedded.esm.mjs",
       "require": "./dist/embedded.cjs.js"
     },
     "./*": "./*"

diff --git a/packages/runtime/rollup.config.js b/packages/runtime/rollup.config.js
@@ -3,7 +3,7 @@ const copy = require('rollup-plugin-copy');
 
 const FEDERATION_DEBUG = process.env.FEDERATION_DEBUG || '';
 
-module.exports = (rollupConfig) => {
+module.exports = (rollupConfig, projectOptions) => {
   rollupConfig.input = {
     index: 'packages/runtime/src/index.ts',
     types: 'packages/runtime/src/types.ts',
@@ -30,6 +30,14 @@ module.exports = (rollupConfig) => {
         }
       },
       hoistTransitiveImports: false,
+      entryFileNames:
+        c.format === 'esm'
+          ? c.entryFileNames.replace('.js', '.mjs')
+          : c.entryFileNames,
+      chunkFileNames:
+        c.format === 'esm'
+          ? c.chunkFileNames.replace('.js', '.mjs')
+          : c.chunkFileNames,
     }));
   } else {
     rollupConfig.output = {
@@ -40,6 +48,14 @@ module.exports = (rollupConfig) => {
         }
       },
       hoistTransitiveImports: false,
+      entryFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.entryFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.entryFileNames,
+      chunkFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.chunkFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.chunkFileNames,
     };
   }
 

diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -17,17 +17,17 @@
   "author": "zhanghang <[email protected]>",
   "sideEffects": false,
   "main": "./dist/index.cjs.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.esm.mjs",
   "types": "./dist/index.cjs.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs.js"
     },
     "./normalize-webpack-path": {
       "types": "./dist/normalize-webpack-path.cjs.d.ts",
-      "import": "./dist/normalize-webpack-path.esm.js",
+      "import": "./dist/normalize-webpack-path.esm.mjs",
       "require": "./dist/normalize-webpack-path.cjs.js"
     }
   },

diff --git a/packages/sdk/rollup.config.js b/packages/sdk/rollup.config.js
@@ -18,6 +18,14 @@ module.exports = (rollupConfig, _projectOptions) => {
         }
       },
       hoistTransitiveImports: false,
+      entryFileNames:
+        c.format === 'esm'
+          ? c.entryFileNames.replace('.js', '.mjs')
+          : c.entryFileNames,
+      chunkFileNames:
+        c.format === 'esm'
+          ? c.chunkFileNames.replace('.js', '.mjs')
+          : c.chunkFileNames,
     }));
   } else {
     rollupConfig.output = {
@@ -28,6 +36,14 @@ module.exports = (rollupConfig, _projectOptions) => {
         }
       },
       hoistTransitiveImports: false,
+      entryFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.entryFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.entryFileNames,
+      chunkFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.chunkFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.chunkFileNames,
     };
   }
 

diff --git a/packages/webpack-bundler-runtime/package.json b/packages/webpack-bundler-runtime/package.json
@@ -17,23 +17,23 @@
   },
   "author": "zhanghang <[email protected]>",
   "main": "./dist/index.cjs.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.esm.mjs",
   "types": "./dist/index.cjs.d.ts",
   "dependencies": {
     "@module-federation/runtime": "workspace:*",
     "@module-federation/sdk": "workspace:*"
   },
   "exports": {
     ".": {
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs.js"
     },
     "./constant": {
-      "import": "./dist/constant.esm.js",
+      "import": "./dist/constant.esm.mjs",
       "require": "./dist/constant.cjs.js"
     },
     "./container": {
-      "import": "./dist/container.esm.js",
+      "import": "./dist/container.esm.mjs",
       "require": "./dist/container.cjs.js"
     },
     "./*": "./*"

diff --git a/packages/webpack-bundler-runtime/rollup.config.js b/packages/webpack-bundler-runtime/rollup.config.js
@@ -33,12 +33,28 @@ module.exports = (rollupConfig, projectOptions) => {
       ...c,
       manualChunks: (id) => manualChunks(id, projectOptions),
       hoistTransitiveImports: false,
+      entryFileNames:
+        c.format === 'esm'
+          ? c.entryFileNames.replace('.js', '.mjs')
+          : c.entryFileNames,
+      chunkFileNames:
+        c.format === 'esm'
+          ? c.chunkFileNames.replace('.js', '.mjs')
+          : c.chunkFileNames,
     }));
   } else {
     rollupConfig.output = {
       ...rollupConfig.output,
       manualChunks: (id) => manualChunks(id, projectOptions),
       hoistTransitiveImports: false,
+      entryFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.entryFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.entryFileNames,
+      chunkFileNames:
+        rollupConfig.output.format === 'esm'
+          ? rollupConfig.output.chunkFileNames.replace('.js', '.mjs')
+          : rollupConfig.output.chunkFileNames,
     };
   }