@module-federation/nextjs-mf 5.2.0 → 5.2.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/NextFederationPlugin.js

@@ -1,479 +1,7 @@
 'use strict';
 
-var path = require('path');
-var helpers = require('./loaders/helpers');
-var nextPageMapLoader = require('./loaders/nextPageMapLoader');
+var NextFederationPlugin = require('./NextFederationPlugin2.js');
 
-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: {
-              ...(this._extraOptions.skipSharingNextInternals
-                ? {}
-                : 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/loaders/fixImageLoader.js

@@ -1,3 +1,7 @@
+const path = require('path');
+const Template = require('webpack/lib/Template');
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
+
 /**
  * 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
@@ -12,14 +16,44 @@
  *
  * @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')";
+async function fixImageLoader(remaining) {
+  this.cacheable(true);
+  const isServer = this._compiler.options.name !== 'client';
+  const result = await this.importModule(
+    `${this.resourcePath}.webpack[javascript/auto]` + `!=!${remaining}`
+  );
+  const content = result.default || result;
+
+  const computedAssetPrefix = isServer
+    ? ` \'\'`
+    : `(${RuntimeGlobals.publicPath} && ${RuntimeGlobals.publicPath}.indexOf('://') > 0 ? new URL(${RuntimeGlobals.publicPath}).origin : \'\')`;
 
-  return content.replace('"src":', `"src":${currentHostnameCode}+`);
+  const constructedObject = Object.entries(content).reduce(
+    (acc, [key, value]) => {
+      if (key === 'src') {
+        if (value && value.indexOf('://') < 0) {
+          value = path.join(value);
+        }
+        acc.push(
+          `${key}: computedAssetsPrefixReference + ${JSON.stringify(value)}`
+        );
+        return acc;
+      }
+      acc.push(`${key}: ${JSON.stringify(value)}`);
+      return acc;
+    },
+    []
+  );
+  const updated = Template.asString([
+    "let computedAssetsPrefixReference = '';",
+    'try {',
+    Template.indent(`computedAssetsPrefixReference = ${computedAssetPrefix};`),
+    '} catch (e) {}',
+    'export default {',
+    Template.indent(constructedObject.join(',\n')),
+    '}',
+  ]);
+  return updated;
 }
 
-module.exports = fixImageLoader;
+module.exports.pitch = fixImageLoader;

package/lib/loaders/helpers.js

@@ -23,13 +23,25 @@ module.exports.hasLoader = function hasLoader(rule, loaderName) {
       const loader = rule.use[i];
       // check exact name, eg "url-loader" or its path "node_modules/url-loader/dist/cjs.js"
       if (
-        loader.loader && (
-        loader.loader === loaderName ||
-        loader.loader.includes(`/${loaderName}/`)
-      )) {
+        loader.loader &&
+        (loader.loader === loaderName ||
+          loader.loader.includes(`/${loaderName}/`))
+      ) {
         return true;
       }
     }
   }
   return false;
 };
+
+module.exports.toDisplayErrors = function toDisplayErrors(err) {
+  return err
+    .map((error) => {
+      let message = error.message;
+      if (error.stack) {
+        message += '\n' + error.stack;
+      }
+      return message;
+    })
+    .join('\n');
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "@module-federation/nextjs-mf",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "Module Federation helper for NextJS",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -11,7 +11,8 @@
   "scripts": {
     "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"
+    "build": "rm -rf lib && cp -r ./src/ lib/ && rollup -c",
+    "prepublishOnly": "yarn build"
   },
   "dependencies": {
     "chalk": "^4.0.0",