@module-federation/nextjs-mf 5.3.0 → 5.3.2

package/node-plugin/streaming/index.js

@@ -0,0 +1,42 @@
+import CommonJsChunkLoadingPlugin from './CommonJsChunkLoadingPlugin';
+
+class NodeSoftwareStreamRuntime {
+  constructor(options, context) {
+    this.options = options || {};
+    this.context = context || {};
+  }
+
+  apply(compiler) {
+    if (compiler.options.target) {
+      console.warn(
+        `target should be set to false while using NodeSoftwareStreamRuntime plugin, actual target: ${compiler.options.target}`
+      );
+    }
+
+    // When used with Next.js, context is needed to use Next.js webpack
+    const { webpack } = compiler;
+
+    // This will enable CommonJsChunkFormatPlugin
+    compiler.options.output.chunkFormat = 'commonjs';
+    // This will force async chunk loading
+    compiler.options.output.chunkLoading = 'async-node';
+    // Disable default config
+    compiler.options.output.enabledChunkLoadingTypes = false;
+
+    new ((webpack && webpack.node && webpack.node.NodeEnvironmentPlugin) ||
+      require('webpack/lib/node/NodeEnvironmentPlugin'))({
+      infrastructureLogging: compiler.options.infrastructureLogging,
+    }).apply(compiler);
+    new ((webpack && webpack.node && webpack.node.NodeTargetPlugin) ||
+      require('webpack/lib/node/NodeTargetPlugin'))().apply(compiler);
+    new CommonJsChunkLoadingPlugin({
+      asyncChunkLoading: true,
+      name: this.options.name,
+      remotes: this.options.remotes,
+      baseURI: compiler.options.output.publicPath,
+      promiseBaseURI: this.options.promiseBaseURI,
+    }).apply(compiler);
+  }
+}
+
+export default NodeSoftwareStreamRuntime;

package/node-plugin/streaming/loadScript.js

@@ -0,0 +1,51 @@
+/**
+ * loadScript(baseURI, fileName, cb)
+ * loadScript(scriptUrl, cb)
+ */
+
+module.exports = `
+    function loadScript(url,cb,chunkID) {
+        var url;
+        var cb = arguments[arguments.length - 1];
+        if (typeof cb !== "function") {
+            throw new Error("last argument should be a function");
+        }
+        if (arguments.length === 2) {
+            url = arguments[0];
+        } else if (arguments.length === 3) {
+            url = new URL(arguments[1], arguments[0]).toString();
+        } else {
+            throw new Error("invalid number of arguments");
+        }
+      if(global.webpackChunkLoad){
+        global.webpackChunkLoad(url).then(function(resp){
+          return resp.text();
+        }).then(function(rawData){
+          cb(null, rawData);
+        }).catch(function(err){
+          console.error('Federated Chunk load failed', error);
+          return cb(error)
+        });
+      } else {
+        //TODO https support
+        let request = (url.startsWith('https') ? require('https') : require('http')).get(url, function (resp) {
+          if (resp.statusCode === 200) {
+            let rawData = '';
+            resp.setEncoding('utf8');
+            resp.on('data', chunk => {
+              rawData += chunk;
+            });
+            resp.on('end', () => {
+              cb(null, rawData);
+            });
+          } else {
+            cb(resp);
+          }
+        });
+        request.on('error', error => {
+          console.error('Federated Chunk load failed', error);
+          return cb(error)
+        });
+      }
+    }
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "description": "Module Federation helper for NextJS",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -32,7 +32,7 @@
     "@types/react": "^18.0.19",
     "concurrently": "^7.3.0",
     "cpx": "^1.5.0",
-    "next": "12.2.2",
+    "next": "12.3.2",
     "prettier": "2.3.2",
     "react": "^18.2.0",
     "rollup": "^2.78.1",
@@ -42,7 +42,7 @@
     "rollup-plugin-typescript2": "^0.33.0",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
-    "webpack": "5.45.1"
+    "webpack": "5.64.4"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"

package/lib/NextFederationPlugin2.js

@@ -1,536 +0,0 @@
-'use strict';
-
-var require$$0 = require('path');
-require('./loaders/helpers.js');
-require('./loaders/nextPageMapLoader.js');
-var DevHmrFixInvalidPongPlugin$1 = require('./plugins/DevHmrFixInvalidPongPlugin.js');
-var helpers = require('./_virtual/helpers.js');
-var nextPageMapLoader = require('./_virtual/nextPageMapLoader.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-
-/*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Zackary Jackson @ScriptedAlchemy
-*/
-const path = require$$0__default["default"];
-const {
-  injectRuleLoader,
-  hasLoader,
-  toDisplayErrors,
-} = helpers.__exports;
-const { exposeNextjsPages } = nextPageMapLoader.nextPageMapLoader.exports;
-const DevHmrFixInvalidPongPlugin = DevHmrFixInvalidPongPlugin$1;
-
-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 ChildFederationPlugin {
-  constructor(options, extraOptions = {}) {
-    this._options = options;
-    this._extraOptions = extraOptions;
-  }
-  /**
-   * Apply the plugin
-   * @param {Compiler} compiler the compiler instance
-   * @returns {void}
-   */
-  apply(compiler) {
-    const webpack = compiler.webpack;
-    const LibraryPlugin = webpack.library.EnableLibraryPlugin;
-    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
-                ? exposeNextjsPages(compiler.options.context)
-                : {}),
-            },
-            runtime: false,
-            shared: {
-              ...(this._extraOptions.skipSharingNextInternals
-                ? {}
-                : externalizedShares),
-              ...this._options.shared,
-            },
-          }),
-          new webpack.web.JsonpTemplatePlugin(childOutput),
-          new LoaderTargetPlugin('web'),
-          new LibraryPlugin(this._options.library.type),
-          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 &&
-          hasLoader(rule, 'next-image-loader')
-        ) {
-          injectRuleLoader(rule, {
-            loader: path.resolve(__dirname, './loaders/fixImageLoader.js'),
-          });
-        }
-
-        // url-loader fix for which adds remote's hostname to the assets url
-        if (
-          this._extraOptions.enableUrlLoaderFix &&
-          hasLoader(rule, 'url-loader')
-        ) {
-          injectRuleLoader({
-            loader: path.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) {
-            compilation.errors.push(err);
-          }
-          if (stats && stats.hasErrors()) {
-            compilation.errors.push(
-              new Error(toDisplayErrors(stats.compilation.errors))
-            );
-          }
-        });
-      } else {
-        childCompiler.runAsChild((err, entries, childCompilation) => {
-          if (childCompilation.getStats().hasErrors()) {
-            compilation.errors.push(
-              new Error(
-                toDisplayErrors(childCompilation.getStats().compilation.errors)
-              )
-            );
-          }
-        });
-      }
-    });
-  }
-}
-
-class AddRuntimeRequirementToPromiseExternal {
-  /**
-   * Apply the plugin
-   * @param {Compiler} compiler the compiler instance
-   * @returns {void}
-   */
-  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: function(shareScope) {
-        const handler = {
-          get(target, prop) {
-            if (target[prop]) {
-              Object.values(target[prop]).forEach(function(o) {
-                if(o.from === '_N_E') {
-                  o.loaded = 1
-                }
-              })
-            }
-            return target[prop]
-          },
-          set(target, property, value, receiver) {
-            if (target[property]) {
-              return target[property]
-            }
-            target[property] = value
-            return true
-          }
-        }
-        try {
-          ${global}.init(new Proxy(shareScope, 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;
-    }
-    if (this._options.library) {
-      console.error('[mf] you cannot set custom library');
-    }
-    this._options.library = {
-      // assign remote name to object to avoid SWC mangling top level variable
-      type: 'window',
-      name: this._options.name,
-    };
-  }
-  /**
-   * Apply the plugin
-   * @param {Compiler} compiler the compiler instance
-   * @returns {void}
-   */
-  apply(compiler) {
-    if (this._extraOptions.automaticPageStitching) {
-      compiler.options.module.rules.push({
-        test: /next[\\/]dist[\\/]client[\\/]page-loader\.js$/,
-        loader: path.resolve(__dirname, './loaders/patchNextClientPageLoader'),
-      });
-    }
-
-    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 ChildFederationPlugin(this._options, this._extraOptions).apply(
-      compiler
-    );
-    new AddRuntimeRequirementToPromiseExternal().apply(compiler);
-    if (compiler.options.mode === 'development') {
-      new DevHmrFixInvalidPongPlugin().apply(compiler);
-    }
-  }
-}
-
-var NextFederationPlugin_1 = NextFederationPlugin;
-
-module.exports = NextFederationPlugin_1;

package/lib/_virtual/UrlNode.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var UrlNode = require('../loaders/UrlNode.js');
-
-var require$$2 = /*@__PURE__*/_commonjsHelpers.getAugmentedNamespace(UrlNode);
-
-module.exports = require$$2;

package/lib/_virtual/_commonjsHelpers.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function getAugmentedNamespace(n) {
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function () {
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-exports.getAugmentedNamespace = getAugmentedNamespace;

package/lib/_virtual/helpers.js

@@ -1,7 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var helpers = {};
-
-exports.__exports = helpers;