fix: dynamic import

zhangHongEn · Aug 6, 2024 · 8aef967 · 8aef967
1 parent 038d375
commit 8aef967
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/examples/vite/src/App.jsx b/examples/vite/src/App.jsx
@@ -1,12 +1,12 @@
+import Mfapp01App from 'mfapp01/App';
 import R from 'react';
 import RD from 'react-dom';
-import Mfapp01App from 'mfapp01/App';
 import Remote2App from 'remote2/App';
 import Button from 'remote3/button';
 import { ref } from 'vue';
 
 console.log('share vue', ref);
-console.log('share React', R, RD);
+console.log('share React', R, RD, import('remote3/button'), import('react'));
 
 export default function () {
   return (

diff --git a/src/index.ts b/src/index.ts
@@ -60,9 +60,9 @@ function generateRemoteEntry(options: NormalizedModuleFederationOptions): string
   async function init(shared = {}) {
     const localShared = {
       ${Object.keys(options.shared)
-        .map((key) => {
-          const shareItem = options.shared[key];
-          return `
+      .map((key) => {
+        const shareItem = options.shared[key];
+        return `
           ${JSON.stringify(key)}: {
             name: ${JSON.stringify(shareItem.name)},
             version: ${JSON.stringify(shareItem.version)},
@@ -82,24 +82,24 @@ function generateRemoteEntry(options: NormalizedModuleFederationOptions): string
             }
           }
         `;
-        })
-        .join(',')}
+      })
+      .join(',')}
     }
     const initRes = runtimeInit({
       name: ${JSON.stringify(options.name)},
       remotes: [${Object.keys(options.remotes)
-        .map((key) => {
-          const remote = options.remotes[key];
-          return `
+      .map((key) => {
+        const remote = options.remotes[key];
+        return `
                 {
                   entryGlobalName: ${JSON.stringify(remote.entryGlobalName)},
                   name: ${JSON.stringify(remote.name)},
                   type: ${JSON.stringify(remote.type)},
                   entry: ${JSON.stringify(remote.entry)},
                 }
           `;
-        })
-        .join(',')}
+      })
+      .join(',')}
       ],
       shared: localShared,
       plugins: [${pluginImportNames.map((item) => `${item[0]}()`).join(', ')}]
@@ -133,15 +133,22 @@ function wrapShare(
           strictVersion: ${JSON.stringify(shareConfig.strictVersion)},
           requiredVersion: ${JSON.stringify(shareConfig.requiredVersion)}
         }}})
-        // TODO: syntheticNamedExports not equal to 'default' will cause dynamic import to fail
-        // TODO: The current settings will result in the inability to directly import the default key of the npm module
-        // if vue = {default: 1, a: 2}
-        // import module from 'vue' --> module: {default: 1, a: 2}
-        // import {a} from 'vue' --> a: 2
-        export default res()
+        const exportModule = res()
+        ${(command === "build" &&
+        `
+          export default 'default' in (exportModule || {}) ? exportModule.default : exportModule
+          export const __mf__dynamicExports = exportModule
+          `
+      ) || ""}
+        ${(command !== "build" &&
+        `
+          export default exportModule
+          `
+      ) || ""}
       `,
     map: null,
-    syntheticNamedExports: 'default',
+    // TODO: vite dev mode invalid, use optimizeDeps.needsInterop
+    syntheticNamedExports: '__mf__dynamicExports',
   };
 }
 
@@ -150,14 +157,22 @@ function wrapRemote(id: string): { code: string; map: null; syntheticNamedExport
   return {
     code: `
     import {loadRemote} from "@module-federation/runtime"
-    // TODO: syntheticNamedExports not equal to 'default' will cause dynamic import to fail
-    // TODO: The current settings will cause dynamic import to fail, and pr vite/rollup may be required
-    export ${
-      command !== 'build' ? 'default' : 'const dynamicExport = '
-    } await loadRemote(${JSON.stringify(id)})
+    const exportModule = await loadRemote(${JSON.stringify(id)})
+    ${(command === "build" &&
+        `
+        export default 'default' in (exportModule || {}) ? exportModule.default : undefined
+        export const __mf__dynamicExports = exportModule
+        `
+      ) || ""}
+      ${(command !== "build" &&
+        `
+        export default exportModule
+        `
+      ) || ""}
   `,
     map: null,
-    syntheticNamedExports: 'dynamicExport',
+    // TODO: vite dev mode invalid, use optimizeDeps.needsInterop
+    syntheticNamedExports: '__mf__dynamicExports',
   };
 }