Merge pull request #27 from module-federation/fix_build_order

Author: ScriptedAlchemy

README.md

@@ -160,6 +160,7 @@ withFederatedSidecar(
     },
   },
   {
+    ssr: true, // if you want to disable the server runtimes, set to false. This will mean client side only.
     removePlugins: [
       // optional
       // these are the defaults
@@ -200,17 +201,18 @@ const remotes = (isServer) => {
 };
 
 const nextConfig = {
-  // your original next.config.js export
-  // we attach next internals to share scope at runtime
+    // your original next.config.js export
+    // we attach next internals to share scope at runtime
 
-  webpack(config, options) {
-    const { webpack, isServer } = options;
-    config.module.rules.push({
-      test: [/_app.[jt]sx?/, /_document.[jt]sx?/],
-      loader: "@module-federation/nextjs-ssr/lib/federation-loader.js",
-    });
+    webpack(config, options) {
+        const {webpack, isServer} = options;
+        config.module.rules.push({
+            test: [/_app.[jt]sx?/, /_document.[jt]sx?/],
+            loader: "@module-federation/nextjs-ssr/lib/federation-loader.js",
+        });
 
-    return config;
+        return config;
+    }
 };
 
 module.exports = withPlugins(

lib/with-federated-sidecar.js

@@ -181,6 +181,7 @@ const withModuleFederation =
       experiments = {
         flushChunks: false,
       },
+      ssr = true,
       removePlugins = [
         "BuildManifestPlugin",
         "DropClientPage",
@@ -391,44 +392,38 @@ const withModuleFederation =
           log.warning("warning:");
           log.warning(info.warnings);
         }
-        const { outputPath, assets, name, chunks } = info;
+        const { chunks } = info;
+        const distPath = path.join(
+          compilation.options.context,
+          nextConfig.distDir
+        );
+        const hasStats = fs.existsSync(
+          path.join(distPath, "static/federated-stats.json")
+        );
+        const hasRemote = fs.existsSync(
+            path.join(distPath, "static/ssr/remoteEntry.js")
+        );
+        if (hasRemote && hasStats && experiments.flushChunks) {
+          let remoteEntry = path.join(
+              distPath,
+              'static/ssr/remoteEntry.js'
+          );
+
 
-        if (name === "federated-server" && experiments.flushChunks) {
-          const remoteEntry = assets.find((asset) => {
-            if (!asset && !asset.name) {
-              return false;
-            }
-            return asset.name.includes("remoteEntry");
-          });
           const statContent = require(path.join(
-            outputPath,
-            "../federated-stats.json"
+            distPath,
+            "static/federated-stats.json"
           ));
 
           let loadableContent;
           if (
             fs.existsSync(
-              path.join(
-                compilation.options.output.path,
-                "../../federated-loadable-manifest.json"
-              )
+              path.join(distPath, "federated-loadable-manifest.json")
             )
           ) {
             loadableContent = require(path.join(
-              compilation.options.output.path,
-              "../../federated-loadable-manifest.json"
-            ));
-          } else if (
-            fs.existsSync(
-              path.join(
-                compilation.options.output.path,
-                "../federated-loadable-manifest.json"
-              )
-            )
-          ) {
-            loadableContent = require(path.join(
-              compilation.options.output.path,
-              "../federated-loadable-manifest.json"
+              distPath,
+              "federated-loadable-manifest.json"
             ));
           } else {
             log(
@@ -439,17 +434,13 @@ const withModuleFederation =
           statContent.loadable = loadableContent;
 
           const remoteContentPromise = new Promise((resolve, reject) => {
-            fs.readFile(
-              path.join(outputPath, remoteEntry.name),
-              "utf-8",
-              function (err, data) {
-                if (err) {
-                  reject(err);
-                  complete();
-                }
-                resolve(data);
+            fs.readFile(remoteEntry, "utf-8", function (err, data) {
+              if (err) {
+                reject(err);
+                complete();
               }
-            );
+              resolve(data);
+            });
           });
 
           const collectedChunkHash = chunks
@@ -469,21 +460,20 @@ const withModuleFederation =
               `init: () => (init), chunkMap: () => (${JSON.stringify(
                 statContent
               )}), hash: ()=>(${JSON.stringify(hash)})`
+
             );
+
             process.nextTick(() => {
-              fs.writeFile(
-                path.join(outputPath, remoteEntry.name),
-                newSource,
-                (err) => {
-                  log("emitted!");
-                  if (typeof done === "function") {
-                    complete();
-                    pending.then(() => {
-                      done(err);
-                    });
-                  }
+              fs.rmSync(remoteEntry);
+              fs.writeFile(remoteEntry, newSource, (err) => {
+                log("emitted!");
+                if (typeof done === "function") {
+                  complete();
+                  pending.then(() => {
+                    done(err);
+                  });
                 }
-              );
+              });
             });
           });
         } else {
@@ -517,6 +507,14 @@ const withModuleFederation =
        * @returns {import("webpack").Configuration}
        */
       webpack(config, options) {
+        if(!ssr && options.isServer) {
+          log('SSR Disabled')
+          if (typeof nextConfig.webpack === "function") {
+            return nextConfig.webpack(config, options);
+          }
+
+          return config;
+        }
         const { webpack } = options;
         Object.assign(config.experiments, {
           topLevelAwait: true,
@@ -641,17 +639,17 @@ const withModuleFederation =
 
             // in production or on server build use tapAsync to wait for the full compilation of the sidecar
             if (isProd || compiler.options.mode === "production") {
-              // if (
-              //   compiler.options.name === "server" ||
-              //   compiler.options.name === "client"
-              // ) {
+              if (
+                compiler.options.name === "server" ||
+                compiler.options.name === "client"
+              ) {
                 compiler.hooks.afterCompile.tapAsync(
                   "NextFederation",
                   (compilation, done) => {
                     run(compilation, done);
                   }
                 );
-              // }
+              }
             } else {
               compiler.hooks.afterCompile.tap(
                 "NextFederation",

package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-ssr",
-  "version": "0.1.0-rc.8",
+  "version": "0.2.0-rc.0",
   "description": "Module Federation CSR & SSR Support for Next.js",
   "main": "bundle.js",
   "types": "index.d.ts",