@module-federation/nextjs-mf 3.0.1 → 5.1.2

package/.prettierignore

@@ -0,0 +1,2 @@
+.next
+lib

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5"
+}

package/README.md

@@ -2,12 +2,19 @@
 
 This plugin enables Module Federation on Next.js
 
-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 || ^11.x.x || ^12.x.x
-- Client side only
+- next ^11.x.x || ^12.x.x
+- Client side only, SSR is another package currently in beta
+
+I highly recommend referencing this application which takes advantage of the best capabilities:
+https://github.com/module-federation/module-federation-examples
+
+## Looking for SSR support?
+
+SSR support for federated applications is much harder, as such - it utilizes a different licensing model.
+If you need SSR support, consider this package instead - it does everything that nextjs-mf does, and them some.
+https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-ssr
 
 ## Whats shared by default?
 
@@ -15,190 +22,234 @@ Under the hood we share some next internals automatically
 You do not need to share these packages, sharing next internals yourself will cause errors.
 
 ```js
-const sharedDefaults = {
-  "next/dynamic": {
+const DEFAULT_SHARE_SCOPE = {
+  react: {
+    singleton: true,
     requiredVersion: false,
+  },
+  'react/': {
     singleton: true,
+    requiredVersion: false,
   },
-  "styled-jsx": {
+  'react-dom': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'next/dynamic': {
     requiredVersion: false,
     singleton: true,
   },
-  "next/link": {
+  'styled-jsx': {
     requiredVersion: false,
     singleton: true,
   },
-  "next/router": {
+  'next/link': {
     requiredVersion: false,
     singleton: true,
   },
-  "next/script": {
+  'next/router': {
     requiredVersion: false,
     singleton: true,
   },
-  "next/head": {
+  'next/script': {
+    requiredVersion: false,
+    singleton: true,
+  },
+  'next/head': {
     requiredVersion: false,
     singleton: true,
   },
 };
 ```
 
-## Things to watch out for
-
-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`
-
-Its recommended using the low-level api to be safe.
+## Usage
 
 ```js
-const SampleComponent = dynamic(
-  () => window.next2.get("./sampleComponent").then((factory) => factory()),
-  {
-    ssr: false,
-  }
-);
+const SampleComponent = dynamic(() => import('next2/sampleComponent'), {
+  ssr: false,
+});
 ```
 
-Make sure you are using `mini-css-extract-plugin@2` - version 2 supports resolving assets through `publicPath:'auto'`
+If you want support for sync imports. It is possible in next@12 as long as there is an async boundary.
 
-## Options
+#### See the implementation here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs/home/pages
+
+With async boundary installed at the page level. You can then do the following
 
 ```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
-  }
-);
+if (process.browser) {
+  const SomeHook = require('next2/someHook');
+}
+// if client only file
+import SomeComponent from 'next2/someComponent';
 ```
 
+Make sure you are using `mini-css-extract-plugin@2` - version 2 supports resolving assets through `publicPath:'auto'`
+
 ## 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
+## Usage
 
-1. Use `withFederatedSidecar` in your `next.config.js` of the app that you wish to expose modules from. We'll call this "next2".
+```js
+const SampleComponent = dynamic(() => import('next2/sampleComponent'), {
+  ssr: false,
+});
+```
+
+If you want support for sync imports. It is possible in next@12 as long as there is an async boundary.
+
+#### See the implementation here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs/home/pages
+
+With async boundary installed at the page level. You can then do the following
 
 ```js
-// next.config.js
-const { withFederatedSidecar } = require("@module-federation/nextjs-mf");
+if (process.browser) {
+  const SomeHook = require('next2/someHook');
+}
+// if client only file
+import SomeComponent from 'next2/someComponent';
+```
 
-module.exports = 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,
-    },
+Make sure you are using `mini-css-extract-plugin@2` - version 2 supports resolving assets through `publicPath:'auto'`
+
+## Options
+
+This plugin works exactly like ModuleFederationPlugin, use it as you'd normally.
+Note that we already share react and next stuff for you automatically.
+
+Also NextFederationPlugin has own optional argument `extraOptions` where you can unlock additional features of this plugin:
+
+```js
+new NextFederationPlugin({
+  name: ...,
+  filename: ...,
+  remotes: ...,
+  exposes: ...,
+  shared: ...,
+  extraOptions: {
+    exposePages: true, // `false` by default
+    enableImageLoaderFix: true, // `false` by default
+    enableUrlLoaderFix: true, // `false` by default
   },
-})({
-  // your original next.config.js export
 });
 ```
 
-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`):
+- `exposePages` – exposes automatically all nextjs pages for you and theirs `./pages-map`.
+- `enableImageLoaderFix` – adds public hostname to all assets bundled by `nextjs-image-loader`. So if you serve remoteEntry from `http://example.com` then all bundled assets will get this hostname in runtime. It's something like Base URL in HTML but for federated modules.
+- `enableUrlLoaderFix` – adds public hostname to all assets bundled by `url-loader`.
+
+## Demo
+
+You can see it in action here: https://github.com/module-federation/module-federation-examples/pull/2147
+
+## Implementing the Plugin
+
+1. Use `NextFederationPlugin` in your `next.config.js` of the app that you wish to expose modules from. We'll call this "next2".
 
 ```js
+// next.config.js
+const NextFederationPlugin = require('@module-federation/nextjs-mf/NextFederationPlugin');
+
 module.exports = {
   webpack(config, options) {
-    config.plugins.push(
-      new options.webpack.container.ModuleFederationPlugin({
-        remoteType: "var",
-        remotes: {
-          next2: "next2",
-        },
-        shared: {
-          react: {
-            // Notice shared ARE eager here.
-            eager: true,
-            singleton: true,
-            requiredVersion: false,
+    if (!options.isServer) {
+      config.plugins.push(
+        new NextFederationPlugin({
+          name: 'next2',
+          remotes: {
+            next1: `next1@http://localhost:3001/_next/static/chunks/remoteEntry.js`,
           },
-          // we have to share something to ensure share scope is initialized
-          "@module-federation/nextjs-mf/lib/noop": {
-            eager: false,
+          filename: 'static/chunks/remoteEntry.js',
+          exposes: {
+            './title': './components/exposedTitle.js',
+            './checkout': './pages/checkout',
+            './pages-map': './pages-map.js',
           },
-        },
-      })
-    );
-
-    // 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",
-    });
+          shared: {
+            // whatever else
+          },
+        })
+      );
+    }
 
     return config;
   },
 };
+
+// _app.js or some other file in as high up in the app (like next's new layouts)
+// this ensures various parts of next.js are imported and "used" somewhere so that they wont be tree shaken out
+import '@module-federation/nextjs-mf/lib/include-defaults';
 ```
 
-4. Add the remote entry for "next2" to the \_document for "next1"
+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`):
+   Inside that \_app.js or layout.js file, ensure you import `include-defaults` file
 
 ```js
-import Document, { Html, Head, Main, NextScript } from "next/document";
+// next.config.js
 
-class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
-  }
+const NextFederationPlugin = require('@module-federation/nextjs-mf/NextFederationPlugin');
 
-  render() {
-    return (
-      <Html>
-        <Head />
-        <body>
-          <Main />
-          <script src="http://next2-domain-here.com/_next/static/chunks/remoteEntry.js" />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
+module.exports = {
+  webpack(config, options) {
+    if (!options.isServer) {
+      config.plugins.push(
+        new NextFederationPlugin({
+          name: 'next1',
+          remotes: {
+            next2: `next2@http://localhost:3000/_next/static/chunks/remoteEntry.js`,
+          },
+        })
+      );
+    }
 
-export default MyDocument;
+    return config;
+  },
+};
+
+// _app.js or some other file in as high up in the app (like next's new layouts)
+// this ensures various parts of next.js are imported and "used" somewhere so that they wont be tree shaken out
+import '@module-federation/nextjs-mf/lib/include-defaults';
 ```
 
-5. Use next/dynamic to import from your remotes
+4. Use next/dynamic or low level api to import remotes.
 
 ```js
-import dynamic from "next/dynamic";
+import dynamic from 'next/dynamic';
 
 const SampleComponent = dynamic(
-  () => window.next2.get("./sampleComponent").then((factory) => factory()),
+  () => window.next2.get('./sampleComponent').then((factory) => factory()),
   {
     ssr: false,
   }
 );
+
+// or
+
+const SampleComponent = dynamic(() => import('next2/sampleComponent'), {
+  ssr: false,
+});
+```
+
+## Utilities
+
+Ive added a util for dynamic chunk loading, in the event you need to load remote containers dynamically.
+
+```js
+import { injectScript } from '@module-federation/nextjs-mf/lib/utils';
+// if i have remotes in my federation plugin, i can pass the name of the remote
+injectScript('home').then((remoteContainer) => {
+  remoteContainer.get('./exposedModule');
+});
+// if i want to load a custom remote not known at build time.
+
+injectScript({
+  global: 'home',
+  url: 'http://somthing.com/remoteEntry.js',
+}).then((remoteContainer) => {
+  remoteContainer.get('./exposedModule');
+});
 ```
 
 ## Contact

package/lib/NextFederationPlugin.js

@@ -0,0 +1,477 @@
+'use strict';
+
+var path = require('path');
+var helpers = require('./loaders/helpers');
+var nextPageMapLoader = require('./loaders/nextPageMapLoader');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
+const CHILD_PLUGIN_NAME = 'ChildFederationPlugin';
+
+/** @typedef {import("../../declarations/plugins/container/ModuleFederationPlugin").ExternalsType} ExternalsType */
+/** @typedef {import("../../declarations/plugins/container/ModuleFederationPlugin").ModuleFederationPluginOptions} ModuleFederationPluginOptions */
+
+/** @typedef {import("webpack").Shared} Shared */
+/** @typedef {import("webpack").Compiler} Compiler */
+
+class ModuleFederationPlugin {
+  /**
+   * @param {ModuleFederationPluginOptions} options options
+   */
+  constructor(options) {
+    this._options = options;
+  }
+
+  /**
+   * Apply the plugin
+   * @param {Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const { _options: options } = this;
+    const webpack = compiler.webpack;
+    const { ContainerPlugin, ContainerReferencePlugin } = webpack.container;
+    const { SharePlugin } = webpack.sharing;
+    const library = options.library || { type: 'var', name: options.name };
+    const remoteType =
+      options.remoteType ||
+      (options.library && /** @type {ExternalsType} */ options.library.type) ||
+      'script';
+    if (
+      library &&
+      !compiler.options.output.enabledLibraryTypes.includes(library.type)
+    ) {
+      compiler.options.output.enabledLibraryTypes.push(library.type);
+    }
+
+    if (
+      options.exposes &&
+      (Array.isArray(options.exposes)
+        ? options.exposes.length > 0
+        : Object.keys(options.exposes).length > 0)
+    ) {
+      new ContainerPlugin({
+        name: options.name,
+        library,
+        filename: options.filename,
+        runtime: options.runtime,
+        exposes: options.exposes,
+      }).apply(compiler);
+    }
+    if (
+      options.remotes &&
+      (Array.isArray(options.remotes)
+        ? options.remotes.length > 0
+        : Object.keys(options.remotes).length > 0)
+    ) {
+      new ContainerReferencePlugin({
+        remoteType,
+        remotes: options.remotes,
+      }).apply(compiler);
+    }
+    if (options.shared) {
+      new SharePlugin({
+        shared: options.shared,
+        shareScope: options.shareScope,
+      }).apply(compiler);
+    }
+  }
+}
+
+class RemoveRRRuntimePlugin {
+  /**
+   * Apply the plugin
+   * @param {Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const webpack = compiler.webpack;
+
+    compiler.hooks.thisCompilation.tap(
+      'RemoveRRRuntimePlugin',
+      (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: 'RemoveRRRuntimePlugin',
+            state: compilation.constructor.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+          },
+          (assets) => {
+            Object.keys(assets).forEach((filename) => {
+              if (filename.endsWith('.js') || filename.endsWith('.mjs')) {
+                const asset = compilation.getAsset(filename);
+                const newSource = asset.source
+                  .source()
+                  .replace(/RefreshHelpers/g, 'NoExist');
+                const updatedAsset = new webpack.sources.RawSource(newSource);
+
+                if (asset) {
+                  compilation.updateAsset(filename, updatedAsset);
+                } else {
+                  compilation.emitAsset(filename, updatedAsset);
+                }
+              }
+            });
+          }
+        );
+      }
+    );
+  }
+}
+
+const DEFAULT_SHARE_SCOPE = {
+  react: {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react/jsx-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react-dom': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  '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,
+  },
+};
+
+class ChildFederation {
+  constructor(options, extraOptions = {}) {
+    this._options = options;
+    this._extraOptions = extraOptions;
+  }
+
+  apply(compiler) {
+    const webpack = compiler.webpack;
+    webpack.EntryPlugin;
+    const LibraryPlugin = webpack.library.EnableLibraryPlugin;
+    webpack.container.ModuleFederationPlugin;
+    webpack.container.ContainerPlugin;
+    const LoaderTargetPlugin = webpack.LoaderTargetPlugin;
+    const library = compiler.options.output.library;
+
+    compiler.hooks.thisCompilation.tap(CHILD_PLUGIN_NAME, (compilation) => {
+      const buildName = this._options.name;
+      const childOutput = {
+        ...compiler.options.output,
+        publicPath: 'auto',
+        chunkLoadingGlobal: buildName + 'chunkLoader',
+        uniqueName: buildName,
+        library: {
+          name: buildName,
+          type: library.type,
+        },
+        chunkFilename: compiler.options.output.chunkFilename.replace(
+          '.js',
+          '-fed.js'
+        ),
+        filename: compiler.options.output.chunkFilename.replace(
+          '.js',
+          '-fed.js'
+        ),
+      };
+      const externalizedShares = Object.entries(DEFAULT_SHARE_SCOPE).reduce(
+        (acc, item) => {
+          const [key, value] = item;
+          acc[key] = { ...value, import: false };
+          if (key === 'react/jsx-runtime') {
+            delete acc[key].import;
+          }
+          return acc;
+        },
+        {}
+      );
+      const childCompiler = compilation.createChildCompiler(
+        CHILD_PLUGIN_NAME,
+        childOutput,
+        [
+          new ModuleFederationPlugin({
+            // library: {type: 'var', name: buildName},
+            ...this._options,
+            exposes: {
+              ...this._options.exposes,
+              ...(this._extraOptions.exposePages
+                ? nextPageMapLoader.exposeNextjsPages(compiler.options.context)
+                : {}),
+            },
+            runtime: false,
+            shared: {
+              ...externalizedShares,
+              ...this._options.shared,
+            },
+          }),
+          new webpack.web.JsonpTemplatePlugin(childOutput),
+          new LoaderTargetPlugin('web'),
+          new LibraryPlugin('var'),
+          new webpack.DefinePlugin({
+            'process.env.REMOTES': JSON.stringify(this._options.remotes),
+            'process.env.CURRENT_HOST': JSON.stringify(this._options.name),
+          }),
+          new AddRuntimeRequirementToPromiseExternal(),
+        ]
+      );
+      new RemoveRRRuntimePlugin().apply(childCompiler);
+
+      childCompiler.options.module.rules.forEach((rule) => {
+        // next-image-loader fix which adds remote's hostname to the assets url
+        if (
+          this._extraOptions.enableImageLoaderFix &&
+          helpers.hasLoader(rule, 'next-image-loader')
+        ) {
+          helpers.injectRuleLoader(rule, {
+            loader: path__default["default"].resolve(__dirname, './loaders/fixImageLoader.js'),
+          });
+        }
+
+        // url-loader fix for which adds remote's hostname to the assets url
+        if (
+          this._extraOptions.enableUrlLoaderFix &&
+          helpers.hasLoader(rule, 'url-loader')
+        ) {
+          helpers.injectRuleLoader({
+            loader: path__default["default"].resolve(__dirname, './loaders/fixUrlLoader.js'),
+          });
+        }
+      });
+
+      const MiniCss = childCompiler.options.plugins.find((p) => {
+        return p.constructor.name === 'NextMiniCssExtractPlugin';
+      });
+
+      const removePlugins = [
+        'NextJsRequireCacheHotReloader',
+        'BuildManifestPlugin',
+        'WellKnownErrorsPlugin',
+        'WebpackBuildEventsPlugin',
+        'HotModuleReplacementPlugin',
+        'NextMiniCssExtractPlugin',
+        'NextFederationPlugin',
+        'CopyFilePlugin',
+        'ProfilingPlugin',
+        'DropClientPage',
+        'ReactFreshWebpackPlugin',
+      ];
+
+      childCompiler.options.plugins = childCompiler.options.plugins.filter(
+        (plugin) => !removePlugins.includes(plugin.constructor.name)
+      );
+
+      if (MiniCss) {
+        new MiniCss.constructor({
+          ...MiniCss.options,
+          filename: MiniCss.options.filename.replace('.css', '-fed.css'),
+          chunkFilename: MiniCss.options.chunkFilename.replace(
+            '.css',
+            '-fed.css'
+          ),
+        }).apply(childCompiler);
+      }
+
+      childCompiler.options.experiments.lazyCompilation = false;
+      childCompiler.options.optimization.runtimeChunk = false;
+      delete childCompiler.options.optimization.splitChunks;
+      childCompiler.outputFileSystem = compiler.outputFileSystem;
+      if (compiler.options.mode === 'development') {
+        childCompiler.run((err, stats) => {
+          if (err) {
+            console.error(err);
+            throw new Error(err);
+          }
+        });
+      } else {
+        childCompiler.runAsChild((err, stats) => {
+          if (err) {
+            console.error(err);
+            throw new Error(err);
+          }
+        });
+      }
+    });
+  }
+}
+
+class AddRuntimeRequirementToPromiseExternal {
+  apply(compiler) {
+    compiler.hooks.compilation.tap(
+      'AddRuntimeRequirementToPromiseExternal',
+      (compilation) => {
+        const RuntimeGlobals = compiler.webpack.RuntimeGlobals;
+        // if (compilation.outputOptions.trustedTypes) {
+        compilation.hooks.additionalModuleRuntimeRequirements.tap(
+          'AddRuntimeRequirementToPromiseExternal',
+          (module, set, context) => {
+            if (module.externalType === 'promise') {
+              set.add(RuntimeGlobals.loadScript);
+              set.add(RuntimeGlobals.require);
+            }
+          }
+        );
+        // }
+      }
+    );
+  }
+}
+
+function extractUrlAndGlobal(urlAndGlobal) {
+  const index = urlAndGlobal.indexOf('@');
+  if (index <= 0 || index === urlAndGlobal.length - 1) {
+    throw new Error(`Invalid request "${urlAndGlobal}"`);
+  }
+  return [urlAndGlobal.substring(index + 1), urlAndGlobal.substring(0, index)];
+}
+
+function generateRemoteTemplate(url, global) {
+  return `promise new Promise(function (resolve, reject) {
+    var __webpack_error__ = new Error();
+    if (typeof ${global} !== 'undefined') return resolve();
+    __webpack_require__.l(
+      ${JSON.stringify(url)},
+      function (event) {
+        if (typeof ${global} !== 'undefined') return resolve();
+        var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+        var realSrc = event && event.target && event.target.src;
+        __webpack_error__.message =
+          'Loading script failed.\\n(' + errorType + ': ' + realSrc + ')';
+        __webpack_error__.name = 'ScriptExternalLoadError';
+        __webpack_error__.type = errorType;
+        __webpack_error__.request = realSrc;
+        reject(__webpack_error__);
+      },
+      ${JSON.stringify(global)},
+    );
+  }).then(function () {
+    const proxy = {
+      get: ${global}.get,
+      init: (args) => {
+        const handler = {
+          get(target, prop) {
+            if (target[prop]) {
+              Object.values(target[prop]).forEach(function(o) {
+                if(o.from === '_N_E') {
+                  o.loaded = true
+                }
+              })
+            }
+            return target[prop]
+          },
+          set(target, property, value, receiver) {
+            if (target[property]) {
+              return target[property]
+            }
+            target[property] = value
+            return true
+          }
+        }
+        try {
+          ${global}.init(new Proxy(__webpack_require__.S.default, handler))
+        } catch (e) {
+
+        }
+        ${global}.__initialized = true
+      }
+    }
+    if (!${global}.__initialized) {
+      proxy.init()
+    }
+    return proxy
+  })`;
+}
+
+function createRuntimeVariables(remotes) {
+  return Object.entries(remotes).reduce((acc, remote) => {
+    acc[remote[0]] = remote[1].replace('promise ', '');
+    return acc;
+  }, {});
+}
+
+class NextFederationPlugin {
+  constructor(options) {
+    const { extraOptions, ...mainOpts } = options;
+    this._options = mainOpts;
+    this._extraOptions = extraOptions;
+    if (options.remotes) {
+      const parsedRemotes = Object.entries(options.remotes).reduce(
+        (acc, remote) => {
+          if (remote[1].includes('@')) {
+            const [url, global] = extractUrlAndGlobal(remote[1]);
+            acc[remote[0]] = generateRemoteTemplate(url, global);
+            return acc;
+          }
+          acc[remote[0]] = remote[1];
+          return acc;
+        },
+        {}
+      );
+      this._options.remotes = parsedRemotes;
+    }
+  }
+
+  apply(compiler) {
+    const webpack = compiler.webpack;
+    const sharedForHost = Object.entries({
+      ...(this._options.shared || {}),
+      ...DEFAULT_SHARE_SCOPE,
+    }).reduce((acc, item) => {
+      const [itemKey, shareOptions] = item;
+
+      const shareKey = 'host' + (item.shareKey || itemKey);
+      acc[shareKey] = shareOptions;
+      if (!shareOptions.import) {
+        acc[shareKey].import = itemKey;
+      }
+      if (!shareOptions.shareKey) {
+        acc[shareKey].shareKey = itemKey;
+      }
+
+      if (DEFAULT_SHARE_SCOPE[itemKey]) {
+        acc[shareKey].packageName = itemKey;
+      }
+      return acc;
+    }, {});
+
+    new webpack.container.ModuleFederationPlugin({
+      ...this._options,
+      exposes: {},
+      shared: {
+        noop: {
+          import: 'data:text/javascript,module.exports = {};',
+          requiredVersion: false,
+          version: '0',
+        },
+        ...sharedForHost,
+      },
+    }).apply(compiler);
+    new webpack.DefinePlugin({
+      'process.env.REMOTES': createRuntimeVariables(this._options.remotes),
+      'process.env.CURRENT_HOST': JSON.stringify(this._options.name),
+    }).apply(compiler);
+    new ChildFederation(this._options, this._extraOptions).apply(compiler);
+    new AddRuntimeRequirementToPromiseExternal().apply(compiler);
+  }
+}
+
+module.exports = NextFederationPlugin;

package/lib/include-defaults.js

@@ -0,0 +1,16 @@
+// if(process.browser && (typeof __webpack_share_scopes__ === "undefined" || !__webpack_share_scopes__.default)) {
+//   __webpack_init_sharing__('default');
+// }
+require('react');
+require('react-dom');
+require('next/link');
+require('next/router');
+require('next/head');
+require('next/script');
+require('next/dynamic');
+require('styled-jsx');
+if (process.env.NODE_ENV === 'development') {
+  require('react/jsx-dev-runtime');
+}
+
+module.exports = {};

package/lib/index.js

@@ -0,0 +1,3 @@
+const NextFederationPlugin = require('./NextFederationPlugin');
+
+module.exports = NextFederationPlugin;

package/lib/loaders/fixImageLoader.js

@@ -0,0 +1,25 @@
+/**
+ * This loader was specially created for tunning next-image-loader result
+ *   see https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/loaders/next-image-loader.js
+ * It takes regular string
+ *   `export default {"src":"/_next/static/media/ssl.e3019f0e.svg","height":20,"width":20};`
+ * And injects PUBLIC_PATH to it from webpack
+ *   `export default {"src":__webpack_require__.p+"/static/media/ssl.e3019f0e.svg","height":20,"width":20};`
+ *
+ *
+ * __webpack_require__.p - is a global variable in webpack container which contains publicPath
+ *   For example:  http://localhost:3000/_next
+ *
+ * @type {(this: import("webpack").LoaderContext<{}>, content: string) => string>}
+ */
+function fixImageLoader(content) {
+  // replace(/(.+\:\/\/[^\/]+){0,1}\/.*/i, '$1')
+  //    this regexp will extract the hostname from publicPath
+  //    http://localhost:3000/_next/... -> http://localhost:3000
+  const currentHostnameCode =
+    "__webpack_require__.p.replace(/(.+\\:\\/\\/[^\\/]+){0,1}\\/.*/i, '$1')";
+
+  return content.replace('"src":', `"src":${currentHostnameCode}+`);
+}
+
+module.exports = fixImageLoader;

package/lib/loaders/fixUrlLoader.js

@@ -0,0 +1,25 @@
+/**
+ * This loader was specially created for tunning url-loader result
+ *
+ * And injects PUBLIC_PATH to it from webpack runtime
+ *   `export default __webpack_require__.p + "/static/media/ssl.e3019f0e.svg"`
+ *
+ * __webpack_require__.p - is a global variable in webpack container which contains publicPath
+ *   For example:  http://localhost:3000/_next
+ *
+ * @type {(this: import("webpack").LoaderContext<{}>, content: string) => string>}
+ */
+function fixUrlLoader(content) {
+  // replace(/(.+\:\/\/[^\/]+){0,1}\/.*/i, '$1')
+  //    this regexp will extract the hostname from publicPath
+  //    http://localhost:3000/_next/... -> http://localhost:3000
+  const currentHostnameCode =
+    "__webpack_require__.p.replace(/(.+\\:\\/\\/[^\\/]+){0,1}\\/.*/i, '$1')";
+
+  return content.replace(
+    'export default "/',
+    `export default ${currentHostnameCode}+"/`
+  );
+}
+
+module.exports = fixUrlLoader;

package/lib/loaders/helpers.js

@@ -0,0 +1,34 @@
+/**
+ * Inject a loader into the current module rule.
+ * This function mutates `rule` argument!
+ */
+module.exports.injectRuleLoader = function injectRuleLoader(rule, loader) {
+  if (rule.loader) {
+    rule.use = [loader, { loader: rule.loader, options: rule.options }];
+    delete rule.loader;
+    delete rule.options;
+  } else if (rule.use) {
+    rule.use = [loader, ...rule.use];
+  }
+};
+
+/**
+ * Check that current module rule has a loader with the provided name.
+ */
+module.exports.hasLoader = function hasLoader(rule, loaderName) {
+  if (rule.loader === loaderName) {
+    return true;
+  } else if (rule.use) {
+    for (let i = 0; i < rule.use.length; i++) {
+      const loader = rule.use[i];
+      // check exact name, eg "url-loader" or its path "node_modules/url-loader/dist/cjs.js"
+      if (
+        loader.loader === loaderName ||
+        loader.loader.includes(`/${loaderName}/`)
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+};

package/lib/loaders/nextPageMapLoader.js

@@ -0,0 +1,129 @@
+const fg = require('fast-glob');
+const fs = require('fs');
+
+/**
+ * Webpack loader which prepares MF map for NextJS pages
+ *
+ * @type {(this: import("webpack").LoaderContext<{}>, content: string) => string>}
+ */
+function nextPageMapLoader() {
+  const pages = getNextPages(this.rootContext);
+  const pageMap = preparePageMap(pages);
+
+  // const [pagesRoot] = getNextPagesRoot(this.rootContext);
+  // this.addContextDependency(pagesRoot);
+
+  const result = `module.exports = { 
+    default: ${JSON.stringify(pageMap)},
+  };`;
+
+  this.callback(null, result);
+}
+
+/**
+ * Webpack config generator for `exposes` option.
+ *   - automatically create `./pages-map` module
+ *   - automatically add all page modules
+ */
+function exposeNextjsPages(cwd) {
+  const pages = getNextPages(cwd);
+
+  const pageModulesMap = {};
+  pages.forEach((page) => {
+    // Creating a map of pages to modules
+    //   './pages/storage/index': './pages/storage/index.tsx',
+    //   './pages/storage/[...slug]': './pages/storage/[...slug].tsx',
+    pageModulesMap['./' + sanitizePagePath(page)] = `./${page}`;
+  });
+
+  const exposesWithPageMap = {
+    './pages-map': `${__filename}!${__filename}`,
+    ...pageModulesMap,
+  };
+
+  return exposesWithPageMap;
+}
+
+function getNextPagesRoot(appRoot) {
+  let pagesDir = 'src/pages/';
+  let absPageDir = `${appRoot}/${pagesDir}`;
+  if (!fs.existsSync(absPageDir)) {
+    pagesDir = 'pages/';
+    absPageDir = `${appRoot}/${pagesDir}`;
+  }
+
+  return [absPageDir, pagesDir];
+}
+
+/**
+ * From provided ROOT_DIR `scan` pages directory
+ * and return list of user defined pages
+ * (except special ones, like _app, _document, _error)
+ *
+ * @type {(rootDir: string) => string[]}
+ */
+function getNextPages(rootDir) {
+  const [cwd, pagesDir] = getNextPagesRoot(rootDir);
+
+  // scan all files in pages folder except pages/api
+  let pageList = fg.sync('**/*.{ts,tsx,js,jsx}', {
+    cwd,
+    onlyFiles: true,
+    ignore: ['api/**'],
+  });
+
+  // remove specific nextjs pages
+  const exclude = [
+    /^_app\..*/, // _app.tsx
+    /^_document\..*/, // _document.tsx
+    /^_error\..*/, // _error.tsx
+    /^404\..*/, // 404.tsx
+    /^500\..*/, // 500.tsx
+    /^\[\.\.\..*\]\..*/, // /[...federationPage].tsx
+  ];
+  pageList = pageList.filter((page) => {
+    return !exclude.some((r) => r.test(page));
+  });
+
+  pageList = pageList.map((page) => `${pagesDir}${page}`);
+
+  return pageList;
+}
+
+function sanitizePagePath(item) {
+  return item
+    .replace(/^src\/pages\//i, 'pages/')
+    .replace(/\.(ts|tsx|js|jsx)$/, '');
+}
+
+/**
+ * Create MF map from list of NextJS pages
+ *
+ * From
+ *   ['pages/index.tsx', 'pages/storage/[...slug].tsx', 'pages/storage/index.tsx']
+ * Getting the following map
+ *   {
+ *     '/': './pages/index',
+ *     '/storage/*': './pages/storage/[...slug]',
+ *     '/storage': './pages/storage/index'
+ *   }
+ *
+ * @type {(pages: string[]) => {[key: string]: string}}
+ */
+function preparePageMap(pages) {
+  const result = {};
+
+  pages.forEach((pagePath) => {
+    const page = sanitizePagePath(pagePath);
+    let key =
+      '/' +
+      page.replace(/\[\.\.\.[^\]]+\]/gi, '*').replace(/\[([^\]]+)\]/gi, ':$1');
+    key = key.replace(/^\/pages\//, '/').replace(/\/index$/, '') || '/';
+    result[key] = `./${page}`;
+  });
+
+  return result;
+}
+
+module.exports = nextPageMapLoader;
+module.exports.exposeNextjsPages = exposeNextjsPages;

package/lib/utils.js

@@ -0,0 +1,97 @@
+const remoteVars = process.env.REMOTES || {};
+
+const runtimeRemotes = Object.entries(remoteVars).reduce(function (acc, item) {
+  const [key, value] = item;
+  if (typeof value === 'object' && typeof value.then === 'function') {
+    acc[key] = { asyncContainer: value };
+  } else if (typeof value === 'string') {
+    const [global, url] = value.split('@');
+    acc[key] = { global, url };
+  } else {
+    throw new Error(`[mf] Invalid value received for runtime_remote "${key}"`);
+  }
+  return acc;
+}, {});
+
+module.exports.remotes = runtimeRemotes;
+
+/**
+ * Return initialized remote container by remote's key or its runtime remote item data.
+ *
+ * `runtimeRemoteItem` might be
+ *    { global, url } - values obtained from webpack remotes option `global@url`
+ * or
+ *    { asyncContainer } - async container is a promise that resolves to the remote container
+ */
+function injectScript(keyOrRuntimeRemoteItem) {
+  let reference = keyOrRuntimeRemoteItem;
+  if (typeof keyOrRuntimeRemoteItem === 'string') {
+    reference = runtimeRemotes[keyOrRuntimeRemoteItem];
+  }
+
+  // 1) Load remote container if needed
+  let asyncContainer;
+  if (reference.asyncContainer) {
+    asyncContainer = reference.asyncContainer;
+  } else {
+    const remoteGlobal = reference.global;
+    const __webpack_error__ = new Error();
+    asyncContainer = new Promise(function (resolve, reject) {
+      if (typeof window[remoteGlobal] !== 'undefined') {
+        return resolve(window[remoteGlobal]);
+      }
+
+      __webpack_require__.l(
+        reference.url,
+        function (event) {
+          if (typeof window[remoteGlobal] !== 'undefined') {
+            return resolve(window[remoteGlobal]);
+          }
+
+          var errorType =
+            event && (event.type === 'load' ? 'missing' : event.type);
+          var realSrc = event && event.target && event.target.src;
+          __webpack_error__.message =
+            'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
+          __webpack_error__.name = 'ScriptExternalLoadError';
+          __webpack_error__.type = errorType;
+          __webpack_error__.request = realSrc;
+          reject(__webpack_error__);
+        },
+        remoteGlobal
+      );
+    });
+  }
+
+  // 2) Initialize remote container
+  return asyncContainer
+    .then(function (container) {
+      if (!__webpack_share_scopes__.default) {
+        // not always a promise, so we wrap it in a resolve
+        return Promise.resolve(__webpack_init_sharing__('default')).then(
+          function () {
+            return container;
+          }
+        );
+      } else {
+        return container;
+      }
+    })
+    .then(function (container) {
+      try {
+        // WARNING: here might be a potential BUG.
+        //   `container.init` does not return a Promise, and here we do not call `then` on it.
+        // But according to [docs](https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers)
+        //   it must be async.
+        // The problem may be in Proxy in NextFederationPlugin.js.
+        //   or maybe a bug in the webpack itself - instead of returning rejected promise it just throws an error.
+        // But now everything works properly and we keep this code as is.
+        container.init(__webpack_share_scopes__.default);
+      } catch (e) {
+        // maybe container already initialized so nothing to throw
+      }
+      return container;
+    });
+}
+
+module.exports.injectScript = injectScript;

package/package.json

@@ -1,17 +1,32 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "3.0.1",
+  "version": "5.1.2",
   "description": "Module Federation helper for NextJS",
-  "main": "index.js",
-  "readme": "README.md",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "repository": "https://github.com/module-federation/nextjs-mf",
   "author": "Zack Jackson <zackary.l.jackson@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "postinstall": "npm install @module-federation/nextjs-mf --registry https://r.privjs.com"
+    "demo": "yarn build && cd demo && yarn install && yarn dev",
+    "prettier": "prettier --write \"**/*.{js,json,md,ts,tsx}\"",
+    "build": "rm -rf lib && cp -r ./src/ lib/ && rollup -c"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "^3.5.0"
+    "chalk": "^4.0.0",
+    "fast-glob": "^3.2.11"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-multi-entry": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "next": "11.0.1",
+    "prettier": "2.3.2",
+    "rollup": "^2.78.1",
+    "rollup-obfuscator": "^3.0.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "webpack": "5.45.1"
   }
 }

package/index.js

@@ -1,5 +0,0 @@
-const {withFederatedSidecar} = require("@module-federation/nextjs-mf");
-
-module.exports = {
-  withFederatedSidecar,
-};

package/lib/federation-loader.js

@@ -1 +0,0 @@
-module.exports = require("@module-federation/nextjs-mf/lib/federation-loader")