Fix: issue with multiple init calls in remote

module-federation · Oct 29, 2024 · ff9ad31 · ff9ad31
1 parent b7d638c
commit ff9ad31
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -33,11 +33,12 @@ function federation(mfUserOptions: ModuleFederationOptions): Plugin[] {
     ...addEntry({
       entryName: 'remoteEntry',
       entryPath: REMOTE_ENTRY_ID,
-      fileName: filename,
+      fileName: filename
     }),
     ...addEntry({
       entryName: 'hostInit',
       entryPath: getHostAutoInitPath(),
+      inject: "html"
     }),
     ...addEntry({
       entryName: 'virtualExposes',

diff --git a/src/plugins/pluginAddEntry.ts b/src/plugins/pluginAddEntry.ts
@@ -6,13 +6,16 @@ interface AddEntryOptions {
   entryName: string;
   entryPath: string;
   fileName?: string;
+  inject?: 'entry' | 'html'
 }
 
-const addEntry = ({ entryName, entryPath, fileName }: AddEntryOptions): Plugin[] => {
+const addEntry = ({ entryName, entryPath, fileName, inject = 'entry' }: AddEntryOptions): Plugin[] => {
   const devEntryPath = entryPath.startsWith('virtual:mf') ? '/@id/' + entryPath : entryPath;
   let entryFiles: string[] = [];
   let htmlFilePath: string;
   let _command: string;
+  let emitFileId: string;
+  let viteConfig: any;
 
   return [
     {
@@ -24,7 +27,7 @@ const addEntry = ({ entryName, entryPath, fileName }: AddEntryOptions): Plugin[]
       configureServer(server) {
         server.httpServer?.once?.('listening', () => {
           const { port } = server.config.server;
-          fetch(path.join(`http://localhost:${port}`, `${devEntryPath}`)).catch((e) => {});
+          fetch(path.join(`http://localhost:${port}`, `${devEntryPath}`)).catch((e) => { });
         });
         server.middlewares.use((req, res, next) => {
           if (!fileName) {
@@ -50,6 +53,7 @@ const addEntry = ({ entryName, entryPath, fileName }: AddEntryOptions): Plugin[]
       name: 'add-entry',
       enforce: 'post',
       configResolved(config) {
+        viteConfig = config
         const inputOptions = config.build.rollupOptions.input;
 
         if (!inputOptions) {
@@ -77,7 +81,7 @@ const addEntry = ({ entryName, entryPath, fileName }: AddEntryOptions): Plugin[]
         if (!hasHash) {
           emitFileOptions.fileName = fileName;
         }
-        this.emitFile(emitFileOptions);
+        emitFileId = this.emitFile(emitFileOptions);
         if (htmlFilePath) {
           const htmlContent = fs.readFileSync(htmlFilePath, 'utf-8');
           const scriptRegex = /<script\s+[^>]*src=["']([^"']+)["'][^>]*>/gi;
@@ -88,8 +92,27 @@ const addEntry = ({ entryName, entryPath, fileName }: AddEntryOptions): Plugin[]
           }
         }
       },
+      generateBundle(options, bundle) {
+        if (inject !== "html") return
+        const file = this.getFileName(emitFileId);
+        const scriptContent = `
+          <script type="module" src="${viteConfig.base + file}"></script>
+        `;
+
+        for (const fileName in bundle) {
+          if (fileName.endsWith('.html')) {
+            let htmlAsset = bundle[fileName];
+            if (htmlAsset.type === 'chunk') return;
+            let htmlContent = htmlAsset.source.toString() || '';
+
+            htmlContent = htmlContent.replace('<head>', `<head>${scriptContent}`);
+
+            htmlAsset.source = htmlContent;
+          }
+        }
+      },
       transform(code, id) {
-        if (entryFiles.some((file) => id.endsWith(file))) {
+        if (inject === "entry" && entryFiles.some((file) => id.endsWith(file))) {
           const injection = `
           import ${JSON.stringify(entryPath)};
           `;

diff --git a/src/virtualModules/virtualRemoteEntry.ts b/src/virtualModules/virtualRemoteEntry.ts
@@ -153,7 +153,8 @@ export function generateRemoteEntry(options: NormalizedModuleFederationOptions):
  * Inject entry file, automatically init when used as host,
  * and will not inject remoteEntry
  */
-const hostAutoInitModule = new VirtualModule('hostAutoInit');
+export const HOST_AUTO_INIT_TAG = '__H_A_I__';
+const hostAutoInitModule = new VirtualModule('hostAutoInit', HOST_AUTO_INIT_TAG);
 export function writeHostAutoInit() {
   hostAutoInitModule.writeSync(`
     import {init} from "${REMOTE_ENTRY_ID}"