@module-federation/nextjs-mf 5.3.0 → 5.3.2

package/lib/NextFederationPlugin.js

@@ -1,7 +1,1560 @@
 'use strict';
 
-var NextFederationPlugin = require('./NextFederationPlugin2.js');
+var fs = require('fs');
+var path = require('path');
+var options = require('webpack/lib/container/options');
+var utils = require('webpack/lib/sharing/utils');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+
+// the share scope we attach by default
+// in hosts we re-key them to prevent webpack moving the modules into their own chunks (cause eager error)
+// in remote these are marked as import:false as we always expect the host to prove them
+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,
+  },
+};
+// put host infront of any shared module key, so "hostreact"
+const reKeyHostShared = (options) => {
+  return Object.entries({
+    ...(options || {}),
+    ...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;
+  }, {});
+};
+
+// split the @ syntax into url and global
+const 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)];
+};
+
+// browser template to convert remote into promise new promise and use require.loadChunk to load the chunk
+const 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
+  })`;
+};
+
+const parseShareOptions = (options$1) => {
+  const sharedOptions = options.parseOptions(
+    options$1.shared,
+    (item, key) => {
+      if (typeof item !== 'string')
+        throw new Error('Unexpected array in shared');
+      /** @type {SharedConfig} */
+      const config =
+        item === key || !utils.isRequiredVersion(item)
+          ? {
+              import: item,
+            }
+          : {
+              import: key,
+              requiredVersion: item,
+            };
+      return config;
+    },
+    (item) => item
+  );
+  return sharedOptions.reduce((acc, [key, options]) => {
+    acc[key] = {
+      import: options.import,
+      shareKey: options.shareKey || key,
+      shareScope: options.shareScope,
+      requiredVersion: options.requiredVersion,
+      strictVersion: options.strictVersion,
+      singleton: options.singleton,
+      packageName: options.packageName,
+      eager: options.eager,
+    };
+    return acc;
+  }, {});
+};
+
+// shared packages must be compiled into webpack bundle, not require() pass through
+const internalizeSharedPackages = (options, compiler) => {
+  //TODO: should use this util for other areas where we read MF options from userland
+  if (!options.shared) {
+    return;
+  }
+  const sharedOptions = parseShareOptions(options);
+  // get share keys from user, filter out ones that need to be external
+  const internalizableKeys = Object.keys(sharedOptions).filter((key) => {
+    if (!DEFAULT_SHARE_SCOPE[key]) {
+      return true;
+    }
+    if (!DEFAULT_SHARE_SCOPE[sharedOptions[key].import]) {
+      return true;
+    }
+  });
+  // take original externals regex
+  const backupExternals = compiler.options.externals[0];
+  // if externals is a function (like when you're not running in serverless mode or creating a single build)
+  if (typeof backupExternals === 'function') {
+    // replace externals function with short-circuit, or fall back to original algo
+    compiler.options.externals[0] = (mod, callback) => {
+      if (!internalizableKeys.some((v) => mod.request.includes(v))) {
+        return backupExternals(mod, callback);
+      }
+      // bundle it
+      return Promise.resolve();
+    };
+  }
+};
+
+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;
+  },
+  {}
+);
+
+// determine output base path, derives .next folder location
+const getOutputPath = (compiler) => {
+  const isServer = compiler.options.target !== 'client';
+  let outputPath = compiler.options.output.path.split(path__default["default"].sep);
+  const foundIndex = outputPath.findIndex((i) => {
+    return i === (isServer ? 'server' : 'static');
+  });
+  outputPath = outputPath
+    .slice(0, foundIndex > 0 ? foundIndex : outputPath.length)
+    .join(path__default["default"].sep);
+
+  return outputPath;
+};
+
+const removePlugins = [
+  'NextJsRequireCacheHotReloader',
+  'BuildManifestPlugin',
+  'WellKnownErrorsPlugin',
+  'WebpackBuildEventsPlugin',
+  'HotModuleReplacementPlugin',
+  'NextMiniCssExtractPlugin',
+  'NextFederationPlugin',
+  'CopyFilePlugin',
+  'ProfilingPlugin',
+  'DropClientPage',
+  'ReactFreshWebpackPlugin',
+];
+
+/**
+ * loadScript(baseURI, fileName, cb)
+ * loadScript(scriptUrl, cb)
+ */
+
+var loadScript = `
+    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)
+        });
+      }
+    }
+`;
+
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+*/
+
+const RuntimeGlobals$1 = require('webpack/lib/RuntimeGlobals');
+const RuntimeModule = require('webpack/lib/RuntimeModule');
+const Template = require('webpack/lib/Template');
+const compileBooleanMatcher = require('webpack/lib/util/compileBooleanMatcher');
+const { getUndoPath } = require('webpack/lib/util/identifier');
+
+class ReadFileChunkLoadingRuntimeModule extends RuntimeModule {
+  constructor(runtimeRequirements, options, context) {
+    super('readFile chunk loading', RuntimeModule.STAGE_ATTACH);
+    this.runtimeRequirements = runtimeRequirements;
+    this.options = options;
+    this.context = context;
+  }
+
+  /**
+   * @private
+   * @param {Chunk} chunk chunk
+   * @param {string} rootOutputDir root output directory
+   * @returns {string} generated code
+   */
+  _generateBaseUri(chunk, rootOutputDir) {
+    const options = chunk.getEntryOptions();
+    if (options && options.baseUri) {
+      return `${RuntimeGlobals$1.baseURI} = ${JSON.stringify(options.baseUri)};`;
+    }
+
+    return `${RuntimeGlobals$1.baseURI} = require("url").pathToFileURL(${
+      rootOutputDir
+        ? `__dirname + ${JSON.stringify('/' + rootOutputDir)}`
+        : '__filename'
+    });`;
+  }
+
+  /**
+   * @returns {string} runtime code
+   */
+  generate() {
+    // name in this context is always the current remote itself.
+    // this code below is in each webpack runtime, host and remotes
+    // remote entries handle their own loading of chunks, so i have fractal self awareness
+    // hosts will likely never run the http chunk loading runtime, they use fs.readFile
+    // remotes only use fs.readFile if we were to cache the chunks on disk after fetching - otherwise its always using http
+    // so for example, if im in hostA and require(remoteb/module) --> console.log of name in runtime code will return remoteb
+
+    const { baseURI, promiseBaseURI, remotes, name } = this.options;
+    const { webpack } = this.context;
+    const chunkHasJs =
+      (webpack && webpack.javascript.JavascriptModulesPlugin.chunkHasJs) ||
+      require('webpack/lib/javascript/JavascriptModulesPlugin').chunkHasJs;
+
+    // workaround for next.js
+    const getInitialChunkIds = (chunk, chunkGraph) => {
+      const initialChunkIds = new Set(chunk.ids);
+      for (const c of chunk.getAllInitialChunks()) {
+        if (c === chunk || chunkHasJs(c, chunkGraph)) continue;
+        for (const id of c.ids) initialChunkIds.add(id);
+      }
+      return initialChunkIds;
+    };
+
+    const { chunkGraph, chunk } = this;
+    const { runtimeTemplate } = this.compilation;
+    const fn = RuntimeGlobals$1.ensureChunkHandlers;
+    const withBaseURI = this.runtimeRequirements.has(RuntimeGlobals$1.baseURI);
+    const withExternalInstallChunk = this.runtimeRequirements.has(
+      RuntimeGlobals$1.externalInstallChunk
+    );
+    const withOnChunkLoad = this.runtimeRequirements.has(
+      RuntimeGlobals$1.onChunksLoaded
+    );
+    const withLoading = this.runtimeRequirements.has(
+      RuntimeGlobals$1.ensureChunkHandlers
+    );
+    const withHmr = this.runtimeRequirements.has(
+      RuntimeGlobals$1.hmrDownloadUpdateHandlers
+    );
+    const withHmrManifest = this.runtimeRequirements.has(
+      RuntimeGlobals$1.hmrDownloadManifest
+    );
+
+    const conditionMap = chunkGraph.getChunkConditionMap(chunk, chunkHasJs);
+    const hasJsMatcher = compileBooleanMatcher(conditionMap);
+    const initialChunkIds = getInitialChunkIds(chunk, chunkGraph);
+
+    const outputName = this.compilation.getPath(
+      (
+        (webpack &&
+          webpack.javascript.JavascriptModulesPlugin
+            .getChunkFilenameTemplate) ||
+        require('webpack/lib/javascript/JavascriptModulesPlugin')
+          .getChunkFilenameTemplate
+      )(chunk, this.compilation.outputOptions),
+      {
+        chunk,
+        contentHashType: 'javascript',
+      }
+    );
+    const rootOutputDir = getUndoPath(
+      outputName,
+      this.compilation.outputOptions.path,
+      false
+    );
+
+    const stateExpression = withHmr
+      ? `${RuntimeGlobals$1.hmrRuntimeStatePrefix}_readFileVm`
+      : undefined;
+
+    return Template.asString([
+      withBaseURI
+        ? this._generateBaseUri(chunk, rootOutputDir)
+        : '// no baseURI',
+      '',
+      '// object to store loaded chunks',
+      '// "0" means "already loaded", Promise means loading',
+      `var installedChunks = ${
+        stateExpression ? `${stateExpression} = ${stateExpression} || ` : ''
+      }{`,
+      Template.indent(
+        Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
+          ',\n'
+        )
+      ),
+      '};',
+      '',
+      withOnChunkLoad
+        ? `${
+            RuntimeGlobals$1.onChunksLoaded
+          }.readFileVm = ${runtimeTemplate.returningFunction(
+            'installedChunks[chunkId] === 0',
+            'chunkId'
+          )};`
+        : '// no on chunks loaded',
+      '',
+      withLoading || withExternalInstallChunk
+        ? `var installChunk = ${runtimeTemplate.basicFunction('chunk', [
+            'var moreModules = chunk.modules, chunkIds = chunk.ids, runtime = chunk.runtime;',
+            'for(var moduleId in moreModules) {',
+            Template.indent([
+              `if(${RuntimeGlobals$1.hasOwnProperty}(moreModules, moduleId)) {`,
+              Template.indent([
+                `${RuntimeGlobals$1.moduleFactories}[moduleId] = moreModules[moduleId];`,
+              ]),
+              '}',
+            ]),
+            '}',
+            `if(runtime) runtime(__webpack_require__);`,
+            'for(var i = 0; i < chunkIds.length; i++) {',
+            Template.indent([
+              'if(installedChunks[chunkIds[i]]) {',
+              Template.indent(['installedChunks[chunkIds[i]][0]();']),
+              '}',
+              'installedChunks[chunkIds[i]] = 0;',
+            ]),
+            '}',
+            withOnChunkLoad ? `${RuntimeGlobals$1.onChunksLoaded}();` : '',
+          ])};`
+        : '// no chunk install function needed',
+      '',
+      withLoading
+        ? Template.asString([
+            '// ReadFile + VM.run chunk loading for javascript',
+            `${fn}.readFileVm = function(chunkId, promises) {`,
+            hasJsMatcher !== false
+              ? Template.indent([
+                  '',
+                  'var installedChunkData = installedChunks[chunkId];',
+                  'if(installedChunkData !== 0) { // 0 means "already installed".',
+                  Template.indent([
+                    '// array of [resolve, reject, promise] means "currently loading"',
+                    'if(installedChunkData) {',
+                    Template.indent(['promises.push(installedChunkData[2]);']),
+                    '} else {',
+                    Template.indent([
+                      hasJsMatcher === true
+                        ? 'if(true) { // all chunks have JS'
+                        : `if(${hasJsMatcher('chunkId')}) {`,
+                      Template.indent([
+                        '// load the chunk and return promise to it',
+                        'var promise = new Promise(async function(resolve, reject) {',
+                        Template.indent([
+                          'installedChunkData = installedChunks[chunkId] = [resolve, reject];',
+                          `var filename = require('path').join(__dirname, ${JSON.stringify(
+                            rootOutputDir
+                          )} + ${
+                            RuntimeGlobals$1.getChunkScriptFilename
+                          }(chunkId));`,
+                          "var fs = require('fs');",
+                          'if(fs.existsSync(filename)) {',
+                          Template.indent([
+                            "fs.readFile(filename, 'utf-8', function(err, content) {",
+                            Template.indent([
+                              'if(err) return reject(err);',
+                              'var chunk = {};',
+                              "require('vm').runInThisContext('(function(exports, require, __dirname, __filename) {' + content + '\\n})', filename)" +
+                                "(chunk, require, require('path').dirname(filename), filename);",
+                              'installChunk(chunk);',
+                            ]),
+                            '});',
+                          ]),
+                          '} else {',
+                          Template.indent([
+                            loadScript,
+
+                            `console.log('needs to load remote module from', ${JSON.stringify(
+                              name
+                            )});`,
+                            `console.log('remotes known to', ${JSON.stringify(
+                              name
+                            )}, ${JSON.stringify(remotes)})`,
+                            // keys are mostly useless here, we want to find remote by its global (unique name)
+                            `var remotes = ${JSON.stringify(
+                              Object.values(remotes).reduce((acc, remote) => {
+                                //TODO: need to handle all other cases like when remote is not a @ syntax string
+                                const [global, url] = remote.split('@');
+                                acc[global] = url;
+                                return acc;
+                              }, {})
+                            )};`,
+                            "Object.assign(global.__remote_scope__._config, remotes)",
+                            "const remoteRegistry = global.__remote_scope__._config",
+                            /* TODO: keying by global should be ok, but need to verify - need to deal with when user passes promise new promise()
+    global will/should still exist - but can only be known at runtime */
+                            `console.log('remotes keyed by global name',remotes)`,
+                            `console.log('remote scope configs',global.__remote_scope__._config)`,
+
+                            `console.log('global.__remote_scope__',global.__remote_scope__)`,
+                            `console.log('global.__remote_scope__[${JSON.stringify(
+                              name
+                            )}]',global.__remote_scope__[${JSON.stringify(
+                              name
+                            )}])`,
+
+                            /*   TODO: this global.REMOTE_CONFIG doesnt work in this v5 core, not sure if i need to keep it or not
+                                 not deleting it yet since i might need this for tracking all the remote entries across systems
+                                 for now, im going to use locally known remote scope from remoteEntry config
+                                 update: We will most likely need this, since remote would not have its own config
+                                 id need to access the host system and find the known url
+                                  basically this is how i create publicPath: auto on servers.
+                                 `var requestedRemote = global.REMOTE_CONFIG[${JSON.stringify(
+                                  name
+                                )}]`,
+                             */
+                            "console.log('about to derive remote making request')",
+                            `var requestedRemote = remoteRegistry[${JSON.stringify(
+                              name
+                            )}]`,
+                            "console.log('requested remote', requestedRemote)",
+                            /*TODO: we need to support when user implements own promise new promise function
+                                    for example i have my own promise remotes, not global@remotename
+                                    so there could be cases where remote may be function still - not sure */
+
+                            /*TODO: need to handle if chunk fetch fails/crashes - ensure server still can keep loading
+                                    right now if you throw an error in here, server will stall forever */
+
+                            `if(typeof requestedRemote === 'function'){
+                    requestedRemote = await requestedRemote()
+                  }`,
+                            `console.log('var requestedRemote',requestedRemote);`,
+
+                            // example: uncomment this and server will never reply
+                            // `var scriptUrl = new URL(requestedRemote.split("@")[1]);`,
+                            // since im looping over remote and creating global at build time, i dont need to split string at runtime
+                            // there may still be a use case for that with promise new promise, depending on how we design it.
+                            `var scriptUrl = new URL(requestedRemote);`,
+
+                            `var chunkName = ${RuntimeGlobals$1.getChunkScriptFilename}(chunkId);`,
+
+                            `console.log('chunkname to request',chunkName);`,
+                            `var fileToReplace = require('path').basename(scriptUrl.pathname);`,
+                            `scriptUrl.pathname = scriptUrl.pathname.replace(fileToReplace, chunkName);`,
+                            `console.log('will load remote chunk', scriptUrl.toString());`,
+                            `loadScript(scriptUrl.toString(), function(err, content) {`,
+                            Template.indent([
+                              "console.log('load script callback fired')",
+                              "if(err) {console.error('error loading remote chunk', scriptUrl.toString(),'got',content); return reject(err);}",
+                              'var chunk = {};',
+                              'try {',
+                              "require('vm').runInThisContext('(function(exports, require, __dirname, __filename) {' + content + '\\n})', filename)" +
+                                "(chunk, require, require('path').dirname(filename), filename);",
+                              '} catch (e) {',
+                              "console.log('runInThisContext thew', e)",
+                              '}',
+                              'installChunk(chunk);',
+                            ]),
+                            '});',
+                          ]),
+                          '}',
+                        ]),
+                        '});',
+                        'promises.push(installedChunkData[2] = promise);',
+                      ]),
+                      '} else installedChunks[chunkId] = 0;',
+                    ]),
+                    '}',
+                  ]),
+                  '}',
+                ])
+              : Template.indent(['installedChunks[chunkId] = 0;']),
+            '};',
+          ])
+        : '// no chunk loading',
+      '',
+      withExternalInstallChunk
+        ? Template.asString([
+            'module.exports = __webpack_require__;',
+            `${RuntimeGlobals$1.externalInstallChunk} = installChunk;`,
+          ])
+        : '// no external install chunk',
+      '',
+      withHmr
+        ? Template.asString([
+            'function loadUpdateChunk(chunkId, updatedModulesList) {',
+            Template.indent([
+              'return new Promise(function(resolve, reject) {',
+              Template.indent([
+                `var filename = require('path').join(__dirname, ${JSON.stringify(
+                  rootOutputDir
+                )} + ${RuntimeGlobals$1.getChunkUpdateScriptFilename}(chunkId));`,
+                "require('fs').readFile(filename, 'utf-8', function(err, content) {",
+                Template.indent([
+                  'if(err) return reject(err);',
+                  'var update = {};',
+                  "require('vm').runInThisContext('(function(exports, require, __dirname, __filename) {' + content + '\\n})', filename)" +
+                    "(update, require, require('path').dirname(filename), filename);",
+                  'var updatedModules = update.modules;',
+                  'var runtime = update.runtime;',
+                  'for(var moduleId in updatedModules) {',
+                  Template.indent([
+                    `if(${RuntimeGlobals$1.hasOwnProperty}(updatedModules, moduleId)) {`,
+                    Template.indent([
+                      `currentUpdate[moduleId] = updatedModules[moduleId];`,
+                      'if(updatedModulesList) updatedModulesList.push(moduleId);',
+                    ]),
+                    '}',
+                  ]),
+                  '}',
+                  'if(runtime) currentUpdateRuntime.push(runtime);',
+                  'resolve();',
+                ]),
+                '});',
+              ]),
+              '});',
+            ]),
+            '}',
+            '',
+            Template.getFunctionContent(
+              require('../hmr/JavascriptHotModuleReplacement.runtime.js')
+            )
+              .replace(/\$key\$/g, 'readFileVm')
+              .replace(/\$installedChunks\$/g, 'installedChunks')
+              .replace(/\$loadUpdateChunk\$/g, 'loadUpdateChunk')
+              .replace(/\$moduleCache\$/g, RuntimeGlobals$1.moduleCache)
+              .replace(/\$moduleFactories\$/g, RuntimeGlobals$1.moduleFactories)
+              .replace(
+                /\$ensureChunkHandlers\$/g,
+                RuntimeGlobals$1.ensureChunkHandlers
+              )
+              .replace(/\$hasOwnProperty\$/g, RuntimeGlobals$1.hasOwnProperty)
+              .replace(/\$hmrModuleData\$/g, RuntimeGlobals$1.hmrModuleData)
+              .replace(
+                /\$hmrDownloadUpdateHandlers\$/g,
+                RuntimeGlobals$1.hmrDownloadUpdateHandlers
+              )
+              .replace(
+                /\$hmrInvalidateModuleHandlers\$/g,
+                RuntimeGlobals$1.hmrInvalidateModuleHandlers
+              ),
+          ])
+        : '// no HMR',
+      '',
+      withHmrManifest
+        ? Template.asString([
+            `${RuntimeGlobals$1.hmrDownloadManifest} = function() {`,
+            Template.indent([
+              'return new Promise(function(resolve, reject) {',
+              Template.indent([
+                `var filename = require('path').join(__dirname, ${JSON.stringify(
+                  rootOutputDir
+                )} + ${RuntimeGlobals$1.getUpdateManifestFilename}());`,
+                "require('fs').readFile(filename, 'utf-8', function(err, content) {",
+                Template.indent([
+                  'if(err) {',
+                  Template.indent([
+                    'if(err.code === "ENOENT") return resolve();',
+                    'return reject(err);',
+                  ]),
+                  '}',
+                  'try { resolve(JSON.parse(content)); }',
+                  'catch(e) { reject(e); }',
+                ]),
+                '});',
+              ]),
+              '});',
+            ]),
+            '}',
+          ])
+        : '// no HMR manifest',
+    ]);
+  }
+}
+
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
+const StartupChunkDependenciesPlugin = require('webpack/lib/runtime/StartupChunkDependenciesPlugin');
+// const ChunkLoadingRuntimeModule = require('webpack/lib/node/ReadFileChunkLoadingRuntimeModule')
+class CommonJsChunkLoadingPlugin {
+  constructor(options) {
+    this.options = options || {};
+    this._asyncChunkLoading = this.options.asyncChunkLoading;
+  }
+
+  /**
+   * Apply the plugin
+   * @param {Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const chunkLoadingValue = this._asyncChunkLoading
+      ? 'async-node'
+      : 'require';
+    new StartupChunkDependenciesPlugin({
+      chunkLoading: chunkLoadingValue,
+      asyncChunkLoading: this._asyncChunkLoading,
+    }).apply(compiler);
+    compiler.hooks.thisCompilation.tap(
+      'CommonJsChunkLoadingPlugin',
+      (compilation) => {
+        const onceForChunkSet = new WeakSet();
+        const handler = (chunk, set) => {
+          if (onceForChunkSet.has(chunk)) return;
+          onceForChunkSet.add(chunk);
+          set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+          set.add(RuntimeGlobals.hasOwnProperty);
+          compilation.addRuntimeModule(
+            chunk,
+            new ReadFileChunkLoadingRuntimeModule(set, this.options, {
+              webpack: compiler.webpack,
+            })
+          );
+        };
+
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.ensureChunkHandlers)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadManifest)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.baseURI)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.externalInstallChunk)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.onChunksLoaded)
+          .tap('CommonJsChunkLoadingPlugin', handler);
+
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.ensureChunkHandlers)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            set.add(RuntimeGlobals.getChunkScriptFilename);
+          });
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            set.add(RuntimeGlobals.getChunkUpdateScriptFilename);
+            set.add(RuntimeGlobals.moduleCache);
+            set.add(RuntimeGlobals.hmrModuleData);
+            set.add(RuntimeGlobals.moduleFactoriesAddOnly);
+          });
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadManifest)
+          .tap('CommonJsChunkLoadingPlugin', (chunk, set) => {
+            set.add(RuntimeGlobals.getUpdateManifestFilename);
+          });
+      }
+    );
+  }
+}
+
+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);
+  }
+}
+
+// possible remote evaluators
+// this depends on the chunk format selected.
+// commonjs2 - it think, is lazily evaluated - beware
+// const remote = eval(scriptContent + '\n  try{' + moduleName + '}catch(e) { null; };');
+// commonjs - fine to use but exports marker doesnt exist
+// const remote = eval('let exports = {};' + scriptContent + 'exports');
+// commonjs-module, ideal since it returns a commonjs module format
+// const remote = eval(scriptContent + 'module.exports')
+
+// Note on ESM.
+// Its possible to use ESM import, but its impossible to invalidate the module cache
+// So once something is imported, its stuck. This is problematic with at-runtime since we want to hot reload node
+// if ESM were used, youd be forced to restart the process to re-import modules or use a worker pool
+// Workaround is possible with query string on end of request, but this leaks memory badly
+// with commonjs, we can at least reset the require cache to "reboot" webpack runtime
+// It *can* leak memory, but ive not been able to replicate this to an extent that would be concerning.
+// ESM WILL leak memory, big difference.
+// Im talking with TC39 about a proposal around "virtual module trees" which would solve many problems.
+// VMT is like Realms but better - easiest analogy would be like forking the main thread, without going off main thread
+// VMT allows for scope isolation, but still allows reflection and non-primitive memory pointers to be shared - perfect for MFP
+
+//TODO: should use extractUrlAndGlobal from internal.js
+//TODO: should use Template system like LoadFileChunk runtime does.
+//TODO: should use vm.runInThisContext instead of eval
+//TODO: global.webpackChunkLoad could use a better convention? I have to use a special http client to get out of my infra firewall
+const executeLoadTemplate = `
+    function executeLoad(remoteUrl) {
+    console.log('remoteUrl',remoteUrl)
+        const scriptUrl = remoteUrl.split("@")[1];
+        const moduleName = remoteUrl.split("@")[0];
+        console.log("executing remote load", scriptUrl);
+        return new Promise(function (resolve, reject) {
+   
+         (global.webpackChunkLoad || fetch)(scriptUrl).then(function(res){
+            return res.text();
+          }).then(function(scriptContent){
+            try {
+              const remote = eval(scriptContent + 'module.exports');
+              /* TODO: need something like a chunk loading queue, this can lead to async issues
+               if two containers load the same remote, they can overwrite global scope
+               should check someone is already loading remote and await that */
+              global.__remote_scope__[moduleName] = remote[moduleName] || remote
+              resolve(global.__remote_scope__[moduleName])
+            } catch(e) {
+              console.error('problem executing remote module', moduleName);
+              reject(e);
+            }
+          }).catch((e)=>{
+            console.error('failed to fetch remote', moduleName, scriptUrl);
+            console.error(e);
+            reject(null)
+          })
+        }).catch((e)=>{
+        console.error('error',e);
+          console.warn(moduleName,'is offline, returning fake remote')
+          return {
+            fake: true,
+            get:(arg)=>{
+              console.log('faking', arg,'module on', moduleName);
+
+              return ()=> Promise.resolve();
+            },
+            init:()=>{}
+          }
+        })
+    }
+`;
+
+function buildRemotes(mfConf, webpack) {
+  return Object.entries(mfConf.remotes || {}).reduce(
+    (acc, [name, config]) => {
+// if its already been converted into promise, dont do it again
+      if(config.startsWith('promise ') || config.startsWith('external ')){
+        acc.buildTime[name] = config;
+        return acc;
+      }
+      /*
+  TODO: global remote scope object should go into webpack runtime as a runtime requirement
+   this can be done by referencing my LoadFile, CommonJs plugins in this directory.
+  */
+      const [global, url] = config.split('@');
+      const loadTemplate = `promise new Promise((resolve)=>{
+    if(!global.__remote_scope__) {
+      // create a global scope for container, similar to how remotes are set on window in the browser
+      global.__remote_scope__ = {
+        _config: {},
+      }
+    }
+    
+    global.__remote_scope__._config[${JSON.stringify(global)}] = ${JSON.stringify(url)};
+ 
+    ${executeLoadTemplate}
+    resolve(executeLoad(${JSON.stringify(config)}))
+    }).then(remote=>{
+      console.log(remote);
+      
+      return {
+      get: remote.get,
+      init: (args)=> {
+        console.log(args)
+        return remote.init(args)
+      }
+    }
+  });
+  `;
+      acc.buildTime[name] = loadTemplate;
+      return acc;
+    },
+    { runtime: {}, buildTime: {}, hot: {} }
+  );
+}
+
+class StreamingFederation {
+  constructor({ experiments, ...options }, context) {
+    this.options = options || {};
+    this.context = context || {};
+    this.experiments = experiments || {};
+  }
+
+  apply(compiler) {
+    // When used with Next.js, context is needed to use Next.js webpack
+    const { webpack } = compiler;
+
+    const { buildTime, runtime, hot } = buildRemotes(
+      this.options,
+      webpack || require('webpack')
+    );
+
+    // new ((webpack && webpack.DefinePlugin) || require("webpack").DefinePlugin)(
+    //     defs
+    // ).apply(compiler);
+
+    const pluginOptions = {
+      ...this.options,
+      remotes: buildTime,
+    };
+
+    new (this.context.ModuleFederationPlugin || (webpack && webpack.container.ModuleFederationPlugin) ||
+      require('webpack/lib/container/ModuleFederationPlugin'))(
+      pluginOptions
+    ).apply(compiler);
+  }
+}
+
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra and Zackary Jackson @ScriptedAlchemy
+*/
+/*
+plugin was copied over because ContainerPlugin is called in compiler.hooks.afterPlugins which doest seem to work in child compiler
+ */
+/** @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);
+    }
+  }
+}
+
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Zackary Jackson @ScriptedAlchemy
+*/
+const {
+  injectRuleLoader,
+  hasLoader,
+  toDisplayErrors,
+} = require('./loaders/helpers');
+const { exposeNextjsPages } = require('./loaders/nextPageMapLoader');
+const DevHmrFixInvalidPongPlugin = require('./plugins/DevHmrFixInvalidPongPlugin');
+
+const CHILD_PLUGIN_NAME = 'ChildFederationPlugin';
+
+class RemoveRRRuntimePlugin {
+  /**
+   * Apply the plugin
+   * @param {Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const webpack = compiler.webpack;
+    // only impacts dev mode - dont waste the memory during prod build
+    if (compiler.options.mode === 'development') {
+      compiler.hooks.thisCompilation.tap(
+        'RemoveRRRuntimePlugin',
+        (compilation) => {
+          compilation.hooks.processAssets.tap(
+            {
+              name: 'RemoveRRRuntimePlugin',
+              state:
+                compilation.constructor.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+            },
+            (assets) => {
+              //can this be improved? I need react refresh not to cause global collision in dev mode
+              Object.keys(assets).forEach((filename) => {
+                if (filename.endsWith('.js') || filename.endsWith('.mjs')) {
+                  const asset = compilation.getAsset(filename);
+                  // easiest way to solve it is to prevent react refresh helpers from running when its a federated module chunk
+                  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 computeRemoteFilename = (isServer, filename) => {
+  if (isServer && filename) {
+    return path__default["default"].basename(filename);
+  }
+  return filename;
+};
+const childCompilers = {};
+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;
+    const LoaderTargetPlugin = webpack.LoaderTargetPlugin;
+    const library = compiler.options.output.library;
+    const isServer = compiler.options.name === 'server';
+    const isDev = compiler.options.mode === 'development';
+    let outputPath;
+    if (isDev && isServer) {
+      outputPath = path__default["default"].join(getOutputPath(compiler), 'static/ssr');
+    } else {
+      if (isServer) {
+        outputPath = path__default["default"].join(getOutputPath(compiler), 'static/ssr');
+      } else {
+        outputPath = compiler.options.output.path;
+      }
+    }
+
+    compiler.hooks.thisCompilation.tap(CHILD_PLUGIN_NAME, (compilation) => {
+      const buildName = this._options.name;
+      const childOutput = {
+        ...compiler.options.output,
+        path: outputPath,
+        // path: deriveOutputPath(isServer, compiler.options.output.path),
+        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.filename.replace('.js', '-fed.js'),
+      };
+
+      // using ModuleFederationPlugin does not work, i had to fork because of afterPlugins hook on containerPlugin.
+      const FederationPlugin = ModuleFederationPlugin;
+
+      const federationPluginOptions = {
+        // library: {type: 'var', name: buildName},
+        ...this._options,
+        filename: computeRemoteFilename(isServer, this._options.filename),
+        exposes: {
+          ...this._options.exposes,
+          ...(this._extraOptions.exposePages
+            ? exposeNextjsPages(compiler.options.context)
+            : {}),
+        },
+        runtime: false,
+        shared: {
+          ...(this._extraOptions.skipSharingNextInternals
+            ? {}
+            : externalizedShares),
+          ...this._options.shared,
+        },
+      };
+
+      let plugins;
+      if (compiler.options.name === 'client') {
+        plugins = [
+          new FederationPlugin(federationPluginOptions),
+          new webpack.web.JsonpTemplatePlugin(childOutput),
+          new LoaderTargetPlugin('web'),
+          new LibraryPlugin(this._options.library.type),
+          new webpack.DefinePlugin({
+            'process.env.REMOTES': createRuntimeVariables(
+              this._options.remotes
+            ),
+            'process.env.CURRENT_HOST': JSON.stringify(this._options.name),
+          }),
+          new AddRuntimeRequirementToPromiseExternal(),
+        ];
+      } else if (compiler.options.name === 'server') {
+        plugins = [
+          new StreamingFederation(federationPluginOptions, {ModuleFederationPlugin: FederationPlugin}),
+          new webpack.node.NodeTemplatePlugin(childOutput),
+          //TODO: Externals function needs to internalize any shared module for host and remote build
+          new webpack.ExternalsPlugin(compiler.options.externalsType, [
+            // next dynamic needs to be within webpack, cannot be externalized
+            ...Object.keys(DEFAULT_SHARE_SCOPE).filter(
+              (k) => k !== 'next/dynamic'
+            ),
+            'react/jsx-runtime',
+            'react/jsx-dev-runtime',
+          ]),
+          // new LoaderTargetPlugin('async-node'),
+          new NodeSoftwareStreamRuntime(federationPluginOptions, webpack),
+          new LibraryPlugin(federationPluginOptions.library.type),
+          // new webpack.DefinePlugin({
+          //   'process.env.REMOTES': JSON.stringify(this._options.remotes),
+          //   'process.env.CURRENT_HOST': JSON.stringify(this._options.name),
+          // }),
+          new AddRuntimeRequirementToPromiseExternal(),
+        ];
+      }
+      const childCompiler = compilation.createChildCompiler(
+        CHILD_PLUGIN_NAME,
+        childOutput,
+        plugins
+      );
+
+      childCompiler.outputPath = outputPath;
+      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__default["default"].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__default["default"].resolve(__dirname, './loaders/fixUrlLoader.js'),
+          });
+        }
+      });
+      childCompiler.options.experiments.lazyCompilation = false;
+      childCompiler.options.optimization.runtimeChunk = false;
+      // no custom chunk splitting should be derived from host (next)
+      delete childCompiler.options.optimization.splitChunks;
+      childCompiler.outputFileSystem = fs__default["default"];
+
+      if (compiler.options.optimization.minimize) {
+        for (const minimizer of compiler.options.optimization.minimizer) {
+          if (typeof minimizer === "function") {
+            minimizer.call(childCompiler, childCompiler);
+          } else if (minimizer !== "...") {
+            minimizer.apply(childCompiler);
+          }
+        }
+      }
+
+      new RemoveRRRuntimePlugin().apply(childCompiler);
+
+      const MiniCss = childCompiler.options.plugins.find((p) => {
+        return p.constructor.name === 'NextMiniCssExtractPlugin';
+      });
+
+      childCompiler.options.plugins = childCompiler.options.plugins.filter(
+        (plugin) => !removePlugins.includes(plugin.constructor.name)
+      );
+
+      if (MiniCss) {
+        // grab mini-css and reconfigure it to avoid conflicts with host
+        new MiniCss.constructor({
+          ...MiniCss.options,
+          filename: MiniCss.options.filename.replace('.css', '-fed.css'),
+          chunkFilename: MiniCss.options.chunkFilename.replace(
+            '.css',
+            '-fed.css'
+          ),
+        }).apply(childCompiler);
+      }
+
+
+      // TODO: this can likely be deleted now, if running server child compiler under client is the best way to go
+      // help wanted for all asset pipeline stuff below
+      // let childAssets
+      // if (isServer) {
+      //   childAssets = new Promise((resolve) => {
+      //     childCompiler.hooks.afterEmit.tap(
+      //       CHILD_PLUGIN_NAME,
+      //       (childCompilation) => {
+      //         console.log('after emit assets server');
+      //         resolve(childCompilation.assets);
+      //       }
+      //     );
+      //   });
+      // } else {
+      //   if(isDev) {
+      //     childAssets = new Promise((resolve) => {
+      //       childCompiler.hooks.afterEmit.tap(
+      //         CHILD_PLUGIN_NAME,
+      //         (childCompilation) => {
+      //           resolve(childCompilation.assets);
+      //         }
+      //       );
+      //     });
+      //
+      //   } else {
+      //
+      //       TODO: improve this
+      //       childAssets = new Promise((resolve, reject) => {
+      //         fs.readdir(
+      //           path.join(childCompiler.context, '.next/ssr'),
+      //           function (err, files) {
+      //             if (err) {
+      //               reject('Unable to scan directory: ' + err);
+      //               return;
+      //             }
+      //
+      //             const allFiles = files.map(function (file) {
+      //               return new Promise((res, rej) => {
+      //                 fs.readFile(
+      //                   path.join(childCompiler.context, '.next/ssr', file),
+      //                   (err, data) => {
+      //                     if (err) rej(err);
+      //                     compilation.assets[path.join('static/ssr', file)] = new compiler.webpack.sources.RawSource(data)
+      //                     res();
+      //                   }
+      //                 );
+      //               });
+      //             });
+      //             Promise.all(allFiles).then(resolve).catch(reject)
+      //           }
+      //         );
+      //       });
+      //   }
+      // }
+      // on main compiler add extra assets from server output to browser build
+      // compilation.hooks.additionalAssets.tapPromise(CHILD_PLUGIN_NAME, () => {
+      //   console.log('additional hooks', compiler.options.name);
+      //   console.log('in additional assets hook for main build');
+      //   return childAssets
+      // });
+
+      // cache the serer compiler instance, we will run the server child compiler during the client main compilation
+      // we need to do this because i need access to data from the client build to inject into the server build
+      // in prod builds, server build runs first, followed by client build
+      // in dev, client build runs first, followed by server build
+      childCompilers[compiler.options.name] = childCompiler;
+
+      if (isDev) {
+        // in dev, run the compilers in the order they are created (client, server)
+        childCompiler.run((err, stats) => {
+          if (err) {
+            compilation.errors.push(err);
+          }
+          if (stats && stats.hasErrors()) {
+            compilation.errors.push(
+              new Error(toDisplayErrors(stats.compilation.errors))
+            );
+          }
+        });
+        // in prod, if client
+      } else if (!isServer) {
+// if ssr enabled and server in compiler cache
+        if(childCompilers['server']) {
+          //wrong hook for this
+          // add hook for additional assets to prevent compile from sealing.
+          compilation.hooks.additionalAssets.tapPromise(CHILD_PLUGIN_NAME, () => {
+            return new Promise((res, rej) => {
+              // run server child compilation during client main compilation
+              childCompilers['server'].run((err, stats) => {
+                if (err) {
+                compilation.errors.push(err);
+                rej();
+              }
+              if (stats && stats.hasErrors()) {
+                compilation.errors.push(
+                  new Error(toDisplayErrors(stats.compilation.errors))
+                );
+                rej();
+              }
+                res();
+              });
+            });
+          });
+        }
+        // run client child compiler like normal
+        childCompiler.run((err, stats) => {
+          if (err) {
+            compilation.errors.push(err);
+          }
+          if (stats && stats.hasErrors()) {
+            compilation.errors.push(
+              new Error(toDisplayErrors(stats.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 createRuntimeVariables(remotes) {
+  return Object.entries(remotes).reduce((acc, remote) => {
+    // handle promise new promise and external new promise
+    if (remote[1].startsWith('promise ') || remote[1].startsWith('external ')) {
+      const promiseCall = remote[1]
+        .replace('promise ', '')
+        .replace('external ', '');
+      acc[remote[0]] = `function() {
+        return ${promiseCall}
+      }`;
+      return acc;
+    }
+    // if somehow its just the @ syntax or something else, pass it through
+    acc[remote[0]] = JSON.stringify(remote[1]);
+    return acc;
+  }, {});
+}
+
+class NextFederationPlugin {
+  constructor(options) {
+    const {extraOptions, ...mainOpts} = options;
+    this._options = mainOpts;
+    this._extraOptions = extraOptions || {};
+  }
+
+  /**
+   * Apply the plugin
+   * @param {Compiler} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const isServer = compiler.options.name === 'server';
+    const webpack = compiler.webpack;
+    if (isServer) {
+      console.error('[nextjs-mf] WARNING: SSR IS NOT FULLY SUPPORTED YET, Only use pluign on client builds');
+      // target false because we use our own target for node env
+      compiler.options.target = false;
+      new NodeSoftwareStreamRuntime(this._options, webpack).apply(compiler);
+      this._options.library = {};
+      this._options.library.type = 'commonjs-module';
+      this._options.library.name = this._options.name;
+      // output remote to ssr if server
+      this._options.filename = this._options.filename.replace(
+        '/chunks',
+        '/ssr'
+      );
+
+      // should this be a plugin that we apply to the compiler?
+      internalizeSharedPackages(this._options, compiler);
+    } else {
+      if (this._extraOptions.automaticPageStitching) {
+        compiler.options.module.rules.push({
+          test: /next[\\/]dist[\\/]client[\\/]page-loader\.js$/,
+          loader: path__default["default"].resolve(__dirname, './loaders/patchNextClientPageLoader'),
+        });
+      }
+      if (this._options.remotes) {
+        const parsedRemotes = Object.entries(this._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,
+      };
+    }
+    //todo runtime variable creation needs to be applied for server as well. this is just for client
+    // todo: this needs to be refactored into something more comprehensive. this is just a quick fix
+    new webpack.DefinePlugin({
+      'process.env.REMOTES': createRuntimeVariables(this._options.remotes),
+      'process.env.CURRENT_HOST': JSON.stringify(this._options.name),
+    }).apply(compiler);
+
+
+    const ModuleFederationPlugin = {
+      client: webpack.container.ModuleFederationPlugin,
+      server: StreamingFederation,
+    }[compiler.options.name];
+    // ignore edge runtime and middleware builds
+    if (ModuleFederationPlugin) {
+      const internalShare = reKeyHostShared(this._options.shared);
+      const hostFederationPluginOptions = {
+        ...this._options,
+        exposes: {},
+        shared: {
+          noop: {
+            import: 'data:text/javascript,module.exports = {};',
+            requiredVersion: false,
+            eager: true,
+            version: '0',
+          },
+          ...internalShare,
+        },
+      };
+
+      compiler.options.optimization.chunkIds = 'named';
+
+      new ModuleFederationPlugin(hostFederationPluginOptions, {
+        ModuleFederationPlugin,
+      }).apply(compiler);
+      new ChildFederationPlugin(this._options, this._extraOptions).apply(compiler);
+      new AddRuntimeRequirementToPromiseExternal().apply(compiler);
+      if (compiler.options.mode === 'development') {
+        new DevHmrFixInvalidPongPlugin().apply(compiler);
+      }
+    }
+  }
+}
 
 module.exports = NextFederationPlugin;