fix chunk flushing ssr preheats

Author: ScriptedAlchemy

flushChunksOrig.js

@@ -17,6 +17,30 @@ const loadableManifest = requireMethod(requestPath);
 const flushChunks = async (remoteEnvVar = process.env.REMOTES) => {
   const remoteKeys = Object.keys(remoteEnvVar);
   const remotes = {};
+  const preload = [];
+
+  for (const key in remoteEnvVar) {
+    const remoteContainer = await remoteEnvVar[key]();
+    if (
+      remoteContainer &&
+      remoteContainer.chunkMap &&
+      remoteContainer.chunkMap.federatedModules
+    ) {
+      remoteContainer.chunkMap.federatedModules.forEach((federatedRemote) => {
+        Object.keys(federatedRemote.exposes).forEach(m => {
+          preload.push(remoteContainer.get(m).then((f)=>{
+            try {
+              return f()
+            } catch(e) {
+
+            }
+          }))
+        })
+      })
+      }
+  }
+  const preloaded = await Promise.all(preload)
+
   try {
     for (const key in loadableManifest) {
       const [where, what] = key.split("->");
@@ -28,6 +52,7 @@ const flushChunks = async (remoteEnvVar = process.env.REMOTES) => {
         return null;
       }
       const remoteContainer = await remoteEnvVar[foundFederatedImport]();
+
       const path = remoteContainer.path.split("@")[1];
       const [baseurl] = path.split("static/ssr");
       if (
@@ -44,6 +69,7 @@ const flushChunks = async (remoteEnvVar = process.env.REMOTES) => {
           });
           const request = `.${what.split(foundFederatedImport)[1]}`;
           federatedRemote.exposes[request].forEach((remoteChunks) => {
+
             remoteChunks.chunks.map((chunk) => {
               if (
                 !loadableManifest[key].files.includes(
@@ -68,7 +94,6 @@ const flushChunks = async (remoteEnvVar = process.env.REMOTES) => {
   }
   return [];
 };
-let flushStamp
 export class ExtendedHead extends Head {
   constructor(props, context) {
     super(props, context);
@@ -83,7 +108,7 @@ export class ExtendedHead extends Head {
       if (chunk.props.src.startsWith("/") && chunk.props.src.includes("http")) {
         return React.cloneElement(chunk, {
           ...chunk.props,
-          src: `http${chunk.props.src.split("http")[1]}`.replace('stamp',flushStamp),
+          src: `http${chunk.props.src.split("http")[1]}`,
         });
       } else if (chunk.props.src.includes("-fed") && this.context.assetPrefix) {
         const replacedArg = this.context.assetPrefix.endsWith("/")
@@ -137,16 +162,19 @@ const revalidate = ()=>{
           });
       }
     }).then(()=>{
-      flushStamp = Date.now()
       let req
       if(typeof __non_webpack_require__ === 'undefined') {
         req = require
       } else {
         req = __non_webpack_require__
       }
+      if(global.hotLoad) {
+        global.hotLoad()
+      }
       Object.keys(req.cache).forEach((k) => {
         if(k.includes('remote') || k.includes('runtime') ||  k.includes('server')) {
           delete req.cache[k];
+          // require(k);
         }
       })
     })

lib/with-federated-sidecar.js

@@ -122,9 +122,13 @@ const withModuleFederation =
 
       if (options.isServer) {
         filteredPlugins.push(
+          // new webpack.optimize.LimitChunkCountPlugin({
+          //   maxChunks: 1,
+          // }),
           new webpack.container.ModuleFederationPlugin(federationPluginOptions),
           new NodeSoftwareStreamRuntime(federationPluginOptions, options)
         );
+
       } else {
         filteredPlugins.push(
           new webpack.container.ModuleFederationPlugin(federationPluginOptions)
@@ -388,7 +392,7 @@ const withModuleFederation =
         res(window.${moduleName});
       }
     };
-    script.src = '${scriptUrl}';
+    script.src = '${scriptUrl}' + '?' + Date.now();
     if(existingScript) {
       if(window.${moduleName}) {
         script.onload()

package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-ssr",
-  "version": "0.0.1-beta.28",
+  "version": "0.0.1-beta.33",
   "description": "Module Federation CSR & SSR Support for Next.js",
   "main": "load.js",
   "types": "index.d.ts",

streaming/src/NodeAsyncHttpRuntime/LoadFileChunkLoadingRuntimeModule.js

@@ -83,7 +83,6 @@ class ReadFileChunkLoadingRuntimeModule extends RuntimeModule {
             });`,
           ])
         : "// no baseURI",
-      "",
       `// var nonsense = ${Date.now()}`,
       "// object to store loaded chunks",
       '// "0" means "already loaded", Promise means loading',
@@ -169,12 +168,12 @@ class ReadFileChunkLoadingRuntimeModule extends RuntimeModule {
                           var fileToReplace = require('path').basename(scriptUrl.pathname);
                           scriptUrl.pathname = scriptUrl.pathname.replace(fileToReplace, chunkName);
                     
-                          console.log('remote chunk url', scriptUrl.toString());
+                          console.log('remote chunk url', scriptUrl.toString() + '?' + Date.now());
                           `,
                           `console.log('${promiseBaseURI}','${baseURI}', ${JSON.stringify(
                             remotes
                           )}, '${name}');`,
-                          `loadScript(scriptUrl.toString(), function(err, content) {`,
+                          `loadScript(scriptUrl.toString() + '?' + Date.now(), function(err, content) {`,
                           Template.indent([
                             "if(err) return reject(err);",
                             "var chunk = {};",

streaming/src/NodeModuleFederation/index.js

@@ -23,28 +23,35 @@ const executeLoadTemplate = `
 `;
 
 const processRemoteLoadTemplate = (mfConfig) => `
-    function processRemoteLoad(remote, name, path) {
-        return {
-        get:(request)=> remote.get(request),
+  function processRemoteLoad(remote, name, path) {
+     return Promise.all(Object.keys(remote.chunkMap.federatedModules[0].exposes).map(c=>{
+        return remote.get(c).then(f=>{
+          try {f()} catch(e) {}
+        })
+     })).then(()=>{
+        const prox= {
+        get: remote.get,
         chunkMap: remote.chunkMap,
         path: path,
         init:(arg)=>{try {return remote.init({
             ...arg,
             ${Object.keys(mfConfig.shared || {})
-              .filter(
-                (item) =>
-                  mfConfig.shared[item].singleton &&
-                  mfConfig.shared[item].requiredVersion
-              )
-              .map(function (item) {
-                return `"${item}": {
+  .filter(
+    (item) =>
+      mfConfig.shared[item].singleton &&
+      mfConfig.shared[item].requiredVersion
+  )
+  .map(function (item) {
+    return `"${item}": {
                       ["${mfConfig.shared[item].requiredVersion}"]: {
                         get: () => Promise.resolve().then(() => () => require("${item}"))
                       }
                   }`;
-              })
-              .join(",")}
+  })
+  .join(",")}
         })} catch(e){console.log('remote container already initialized')}}}
+        return prox
+     })
     }
 `;
 
@@ -58,9 +65,15 @@ function buildRemotes(mfConf) {
     (acc, [name, config]) => {
       const template = `new Promise(function(res) {
         ${builtinsTemplate}
-        res(executeLoad("${config}").then(function(remote){return processRemoteLoad(remote,${JSON.stringify(
+        global.loadedRemotes = global.loadedRemotes || {};
+        if(global.loadedRemotes[${JSON.stringify(name)}]) {
+          res(global.loadedRemotes[${JSON.stringify(name)}])
+        return 
+        }
+        global.loadedRemotes[${JSON.stringify(name)}] = executeLoad("${config}").then(function(remote){return processRemoteLoad(remote,${JSON.stringify(
         name
-      )},"${config}")}))
+      )},"${config}")})
+      res(global.loadedRemotes[${JSON.stringify(name)}])
       })`;
       acc.runtime[name] = `()=> ${template}`;
       acc.buildTime[name] = `promise ${template}`;