module-federation / universe Goto Github PK

Found a TODO comment on line 30 of file node-plugin/streaming/loadScript.js

Checking with the community, does this plugin work in next dev mode?

When trying It on larger repos, i run into react refresh related problems.

Found a TODO comment on line 23 of file node-plugin/streaming/NodeRuntime.js

First of all, this is awesome and thanks so much for your contribution! I've been trying to set up a working example locally for the past couple of days - noticing we went from 2.0 to 2.2 - yet either way I end up in a situation where both apps compile just fine but the consuming app has some 404s on some bundles and fails to load the federated component from the remote.

I troubleshooted all options including naming, ports, etc.

I wonder if you could provide more detailed instructions on setting up:

• covering a scenario from complete scratch, including every single bash command as trivial as creating or entering folders, also creating the nextJS apps themselves from scratch
• being MORE explicit and specific about which addition of code/config goes EXACTLY in which file, with path and full filename, perhaps showing the added code in more context
• provide an updated repo (and keep it up to date) that showcases a stable working example based on latest framework versions and dependencies

Both frameworks and dependencies are moving incredibly fast in today's JS ecosystem. Without explicit, verified instructions a lot of folks may be blocked by running into trivial issues. Much thanks!

Found a TODO comment on line 25 of file node-plugin/streaming/NodeRuntime.js

I already do this when in the webpack runtime and loading federated chunks, but this needs to be done for the "last mile" where the host needs to load the remote container in the first place.

Would it be possible to use the webpack_require function itself?

In browser we use webpack_require.l() to load scripts, for node we could use webpack_require.readFile?

When running SSR with module federation we noticed that the next.js server never updates the remote dependencies, e.g. when we replace the files (or even removing them does still use the old component). This sadly can lead to out of sync SSR and clients.

I looked a bit into what happens and there are multiple reasons for that.

1. The require from withModuleFederation caches the remoteEntry.js files (but the require is never called multiple times because
2. the webpack_runtime caches all dependencies without any means of clearing the cache or removing specific cache-items (I cold not find anything in webpack that would help me here)
3. I also checked if the get in withModuleFederation could be used, but it is also never called twice for one remote.

The only method that I currently know that works is restarting the nextjs server completely.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency msw to v1.3.3
• chore(deps): update dependency postcss-custom-properties to v13.3.6
• chore(deps): update dependency tailwindcss to v3.4.3
• chore(deps): update react monorepo (@types/react, @types/react-dom)
• fix(deps): update dependency adm-zip to v0.5.12
• fix(deps): update dependency adm-zip to v0.5.12
• fix(deps): update dependency antd to v4.24.16
• fix(deps): update dependency axios to v1.6.8
• fix(deps): update dependency axios to v1.6.8
• fix(deps): update dependency next to v14.1.4
• fix(deps): update dependency rambda to v9.1.1
• fix(deps): update dependency react-router-dom to v6.22.3
• fix(deps): update dependency sharp to v0.33.3
• fix(deps): update dependency typedoc to v0.25.12
• chore(deps): update dependency @builder.io/partytown to v0.10.1
• chore(deps): update dependency @builder.io/qwik to v1.5.1
• chore(deps): update dependency @builder.io/qwik-city to v1.5.1
• chore(deps): update dependency @modern-js-app/eslint-config to v2.48.4
• chore(deps): update dependency @modern-js/app-tools to v2.48.4
• chore(deps): update dependency @modern-js/eslint-config to v2.48.4
• chore(deps): update dependency @modern-js/tsconfig to v2.48.4
• chore(deps): update dependency @node-rs/jieba to v1.10.0
• chore(deps): update dependency @testing-library/react to v14.2.2
• chore(deps): update dependency @types/node to ~16.18.0
• chore(deps): update dependency cypress to v13.7.1
• chore(deps): update dependency eslint to v8.57.0 (eslint, @types/eslint)
• chore(deps): update dependency eslint-plugin-qwik to v1.5.1
• chore(deps): update dependency eslint-plugin-react to v7.34.1
• chore(deps): update dependency lint-staged to ~13.3.0
• chore(deps): update dependency mammoth to v1.7.1
• chore(deps): update dependency node to v18.20.0 (node, @types/node)
• chore(deps): update dependency open to v10.1.0
• chore(deps): update dependency prettier-eslint to v16.3.0
• chore(deps): update dependency qwik-speak to v0.22.0
• chore(deps): update dependency typescript to v5.4.3
• chore(deps): update dependency verdaccio to v5.30.2
• chore(deps): update dependency vite-tsconfig-paths to v4.3.2
• chore(deps): update dependency wast-loader to v1.12.1
• chore(deps): update dependency webpack to v5.91.0
• chore(deps): update dependency webpack to v5.91.0
• chore(deps): update github/issue-labeler action to v3.4
• chore(deps): update nrwl monorepo to v17.3.2 (@nx/cypress, @nx/devkit, @nx/esbuild, @nx/eslint-plugin, @nx/express, @nx/jest, @nx/js, @nx/linter, @nx/next, @nx/node, @nx/react, @nx/rollup, @nx/storybook, @nx/vite, @nx/web, @nx/webpack, nx)
• chore(deps): update swc monorepo (@swc-node/register, @swc/cli, @swc/core, @swc/helpers, @swc/jest, swc-loader)
• fix(deps): update dependency @modern-js/runtime to v2.48.4
• fix(deps): update dependency core-js to v3.36.1
• fix(deps): update dependency enhanced-resolve to v5.16.0
• fix(deps): update dependency unplugin to v1.10.1
• fix(deps): update dependency unplugin to v1.10.1
• chore(deps): update actions/cache action to v4
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional, @commitlint/config-nx-scopes, @commitlint/cz-commitlint)
• chore(deps): update dependency @jscutlery/semver to v5
• chore(deps): update dependency copy-webpack-plugin to v12
• chore(deps): update dependency eslint-plugin-simple-import-sort to v12
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency ngx-deploy-npm to v8
• chore(deps): update dependency nx-cloud to v18
• chore(deps): update dependency postcss-import to v16
• chore(deps): update dependency prettier to v3.2.5
• chore(deps): update dependency qwik-nx to v2
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency stopword to v3
• chore(deps): update dependency strip-ansi to v7
• chore(deps): update dependency vue-tsc to v2
• chore(deps): update nextjs monorepo to v14 (major) (eslint-config-next, next)
• chore(deps): update nrwl monorepo (major) (@nx/cypress, @nx/devkit, @nx/esbuild, @nx/eslint-plugin, @nx/express, @nx/jest, @nx/js, @nx/linter, @nx/next, @nx/node, @nx/react, @nx/rollup, @nx/rspack, @nx/storybook, @nx/vite, @nx/web, @nx/webpack, nrwl/nx-set-shas, nx)
• chore(deps): update semantic-release monorepo (major) (@semantic-release/github, @semantic-release/npm)
• chore(deps): update storybook monorepo to v8 (major) (@storybook/addon-essentials, @storybook/builder-webpack5, @storybook/core-common, @storybook/core-server, @storybook/node-logger, @storybook/react)
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency acorn to v8
• fix(deps): update dependency buffer to v6
• fix(deps): update dependency chalk to v5
• fix(deps): update dependency eslint-scope to v8
• fix(deps): update dependency fs-extra to v11
• fix(deps): update dependency rambda to v9
• fix(deps): update dependency react to v18
• fix(deps): update dependency schema-utils to v4
• fix(deps): update dependency semver to v7
• fix(deps): update dependency tsup to v8
• fix(deps): update dependency undici to v6

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update babel monorepo (@babel/core, @babel/preset-react)
• chore(deps): update dependency @rspack/core to v0.5.9
• chore(deps): update dependency @rspack/core to v0.5.9
• chore(deps): update dependency @rspack/dev-server to v0.5.9
• chore(deps): update dependency autoprefixer to v10.4.19
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency vite to v5.0.12 [security]
• chore(deps): update dependency @antora/cli to v3.1.7
• chore(deps): update dependency classnames to v2.5.1
• chore(deps): update dependency ts-node to v10.9.2
• chore(deps): update dependency eslint-plugin-import to v2.29.1
• chore(deps): update dependency eslint-plugin-jsx-a11y to v6.8.0
• chore(deps): update vitest monorepo to v1.4.0 (@vitest/coverage-istanbul, @vitest/coverage-v8, @vitest/ui, vitest)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update actions/stale action to v9
• chore(deps): update dependency highlight.js to v11
• chore(deps): update dependency msw to v2
• chore(deps): update dependency node to v20 (node, @types/node)
• chore(deps): update dependency openai to v4
• fix(deps): update dependency antd to v5
• fix(deps): update dependency node-fetch to v3

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I have module-federation/node, which is where this plugin comes from.

Is it possible to keep the plugin agnostic to allow us to import and install it from a registry instead of forking it into this codebase?

the current setup is janky, but works
Ideally we take Valor's NX monorepo setup and lift this repo into that

We would need:

• nextjs-mf to move into NX as a package
• demo apps to consume nextjs-mf and build via nx
• build and publish commands for releasing package to npm
• preserve the nextjs-ssr package (since its fully TS) and take what we can from it, port nextjs-mf over to TS.
• Once ported, kill nextjs-ssr and have nextjs-mf be the only package supporting MF on next universally

I tried to add module federation to a brand new nextjs app and i'm seeing this error. Full Error

mf-test (main)$ yarn build
yarn run v1.22.10
$ next build
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/davidhu/Desktop/mf-test/src/pages'


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/davidhu/Desktop/mf-test/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/davidhu/Desktop/mf-test/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I checked node_modules and sees react/jsx-runtime.js in the directory. possibly related to this react issue. I can't seem to find regarding this fix.

Archive.zip

i zipped up a sample code that shows the issue. just run yarn build or yarn dev to see the error.

Here are the versions we are using

  "dependencies": {
    "@module-federation/nextjs-mf": "^0.2.1",
    "next": "10.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }

Any ideas?

I tried exposing the header component with Links from Next/Link and it throws error in App2

This is my code

Just when I activate the module federation on the webpack config.

The value router from const router = useRouter(); in my _app.tsx comes up as null

Any idea what could be happening?

Thanks in advance!

Refactor needed to improve the complexity.

Break things into more files
Abstractions as needed
Plugins as needed

i have to use mv on server build to move childCompiler assets to /ssr folder. Webpack seems to not respect changing output path. Should be tested again to see if theres a actual issue - but it seems not to work.

This is where compiler asset stage might be useful https://webpack.js.org/api/compilation-hooks/#list-of-asset-processing-stages

it work well when I access remote server 'component-kit'(localhost: 3000) , but It crashed when I access host server 'shell'(localhost: 3001).

it work well when I switch styled component to react component.

Remote Config

packages.json

next.config.js

components/title.tsx

Host Config

packages.json

next.config.js

_document.tsx

index.tsx

The updated documentation shows how to dynamically import a federated module using next/dynamic:

const SampleComponent = dynamic(() => import("next2/sampleComponent"), {
  ssr: false,
});

While this works fine client-side, using ssr: true breaks the server-side rendering. Has anyone come across this issue following the updated documentation?

Next.js in server builds make all node modules external modules to make the build smaller/faster

This presents a problem for module federation when sharing, if its external - its not added to share scope.

Theres a few options;

First we need to include any shared modules in webpack build for server.
In the past - ive done so like this

          // get share keys from user, filter out ones that need to be external
          const internalizableKeys = Object.keys(
            federationPluginOptions.shared
          ).filter((key) => {
            return key !== "react";
          });
          // take original externals regex
          const backupExternals = config.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
            config.externals[0] = (mod, callback) => {
              if (!internalizableKeys.some((v) => mod.request.includes(v))) {
                return backupExternals(mod, callback);
              }
              return Promise.resolve();
            };
          }

However, next and react must remain external. This forced me to use a loader to patch share scope during runtime to include those keys

// language=JS
const shareNextInternals = `if (process.browser) {
  if(!__webpack_share_scopes__.default) {
     __webpack_init_sharing__('default');
  }
    window.__webpack_share_scopes__ = __webpack_share_scopes__
    if(!__webpack_share_scopes__.default.react) {
    Object.assign(__webpack_share_scopes__.default, {
      "react": {
        0: {
          loaded: true,
          get: () => Promise.resolve(() => require("react")),
        },
     },
    })
  }
  Object.assign(__webpack_share_scopes__.default, {
    "next/link": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/link")),
      },
    },
    "next/script": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/script")),
      },
    },
    "next/router": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/router")),
      },
    },
    "next/head": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/head")),
      },
    },
    "next/dynamic": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/dynamic")),
      },
    },
  });
} else {
  if(process.env.NEXT_PHASE !== 'phase-production-build') {
     __webpack_init_sharing__('default');
  }
  
  if(!__webpack_share_scopes__.default) {
      __webpack_share_scopes__.default = {}
  }
  global.__webpack_share_scopes__ = __webpack_share_scopes__
  const reactRequire = require("react");
  const nextLink = require("next/link");
  const nextScript = require("next/script");
  const nextRouter = require("next/router");
  const nextHead = require("next/head");
  const nextDynamic = require("next/dynamic");
  if(!__webpack_share_scopes__.default.react) {
    Object.assign(__webpack_share_scopes__.default, {
      "react": {
        0: {
          loaded: true,
          eager:true,
          get:()=> ()=> reactRequire,
        },
     },
    })
  }
  Object.assign(__webpack_share_scopes__.default, {
    "next/link": {
      0: {
        loaded: true,
        get: () => () => nextLink,
      },
    },
    "next/script": {
     0: {
        loaded: true,
        get: () => () => nextScript,
     },
    },
    "next/router": {
      0: {
        loaded: true,
        get: () => ()=> nextRouter,
      },
    },
    "next/head": {
      0: {
        loaded: true,
        get: () => ()=> nextHead,
      },
    },
    "next/dynamic": {
      0: {
        loaded: true,
        get: () => ()=> nextDynamic,
      },
    },
  })
  
  try {
    global.REMOTE_CONFIG = Object.assign(global.REMOTE_CONFIG || {},process.env.REMOTE_CONFIG)
  } catch(e) {
    // do nothing
  }
}
`;

module.exports = function (source) {
  const FederationPluginInstance = this._compiler.options.plugins.find(
    (plugin) => {
      if (
        plugin.constructor &&
        plugin.constructor.name === "ModuleFederationPlugin"
      ) {
        return true;
      }
    }
  );
  let manualInitializationString = [];
  if (FederationPluginInstance && FederationPluginInstance._options.remotes) {
    manualInitializationString.push("if (process.browser) {");
    Object.keys(FederationPluginInstance._options.remotes).forEach((remote) => {
      manualInitializationString.push(
        `window.${remote}?.init(__webpack_share_scopes__.default);`
      );
    });
    manualInitializationString.push("};");
  }
  manualInitializationString = manualInitializationString.join("\n");
  return shareNextInternals + manualInitializationString + source;
};

Im open to suggestions on how to solve or improve sharing of next internals when on server build.

One idea i had was to create a new runtimeRequirement, adding another webpack closure and function to the webpack runtime which assigns react,react-dom, and next internal packages to the object during startup.

The other possible option is to exclude these from share scope on the server which should make the remoteEntry use require(react) natively.
This would only be used for the react and next libraries themselves - everything else needs to be bundled as we cannot guarentee these packages will exist in the hosts node_modules

I'm trying to test this concept out on vercel and am running into a series of errors. Here are the logs, just trying to host the source code from this repo for app1.

The error I get is Module not found: Error: Can't resolve 'encoding'

And here's the full log output.
`

`

Found a TODO comment on line 59 of file demo/shared/index.js

After upgrading to [email protected] I'm getting following error:

node_modules/webpack-sources/lib/ConcatSource.js:42
			source += typeof child === "string" ? child : child.source();
			                                                    ^
TypeError: Cannot read property 'source' of undefined

Example reproduction: https://github.com/adam187/next-mf-example/tree/next-10-0-5

After upgrading to [email protected]

Error: Cannot find module 'webpack-sources/lib/ConcatSource'

On a side note, looks like this version change how you choose webpack version from resolutions to config option:

// next.config.js
  ...
  future: {
    webpack5: true,
  },

and now next is bundled with both versions (4 and 5) vercel/next.js#21679

Example reproduction: https://github.com/adam187/next-mf-example/tree/next-10-0-6

I'm not sure if it's best to file this here, in the example repo, or in the webpack repo, let me know if there's a better place for this.

I've been unable to get module federation working with the latest version of NextJS, which is using wepback 5.24.4. The explanation below uses the nextjs example at https://github.com/module-federation/module-federation-examples/tree/master/nextjs.

When running the example in the nextjs folder, I get ReferenceError: next1 is not defined. It seems that next1 is not set as a global variable in the browser.

Though the package.json has resolutions to set the Webpack version to 5.18.0, when the webpack5 flag in nextjs is set, it ignores the resolution version and instead pulls in version 5.24.4 (you can see this by adding console.log(options.webpack.version) to the webpack function in next.config.js.

I did some testing with different version of Webpack 5 (using resolutions and an older version of nextjs before they added the webpack5 flag, you can test this in the example repo by removing the caret in front of the dependency next: "^10.0.0"), and determined that the last working version without this error was 5.21.2. Looking at the remoteEntry files that are emitted using v5.21.2 vs v5.22.0, I see that the global variable assignment is missing from the generated remoteEntry file after v5.22.0.

Working - Webpack v5.21.2:

Not working - Webpack v5.22.0

That's as far as I've been able to trace things, I looked through Webpack's 5.22.0 release but didn't see anything obvious. I've also not been able to find a way to actually override the version of webpack 5 in the most recent version of nextjs. I'd really like to adopt module federation in our nextjs apps. Let me know if there's any more info you need. Thanks!

Right now im using run and a callback to move files around the filesystem.

We should use asset pipeline of each build to find and emit files as additionalAssets
https://webpack.js.org/api/compilation-hooks/#additionalassets

or process asset stage: https://webpack.js.org/api/compilation-hooks/#list-of-asset-processing-stages

Until we have the capability of using an .swcrc file with Next, this is just something to be aware of.
When using a configuration object like so:

/**
 * Advanced configuration for Next.js
 * @type { import('next').NextConfig }
 */
const nextConfig = {
    experimental: {
        browsersListForSwc: true,
        legacyBrowsers: false
    },
    swcMinify: true,
    webpack(config, options) {
        // ...NextFederationPlugin({ name: next1, ... })
        return config;
    }
}

swcMinify will compress and mangle your remote entry which will rename var next1 = ... to something like var a = ... when running a production build.

Found a TODO comment on line 221 of file node-plugin/streaming/LoadFileChunkLoadingRuntimeModule.js

Remotes could also be promise new promise functions. If thats the case - there needs to be either an abstraction around when a user uses a promise function or rules where they must resolve a string with the @ syntax back to use so we can parse and load the remote like normal

Steps to reproduce:

1. yarn global add @module-federation/nextjs-mf
2. nextjs-mf upgrade -p 3001 (in a fresh Next.js installation)

Expected output

nextjs-mf upgrade runs through the Next.js folder.

Actual output

command not found: nextjs-mf

Tried uninstalling, re-installing, using npm install instead of yarn etc - nothing helps.
Not sure if it matters, but when installing it globally I get the following warning:

warning "@module-federation/[email protected]" has no binaries

Node version: v15.5.1

When running remote independently the page looks fine, but when importing the remote inside all of the css breaks but app is running. Remotes use css modules and styled-components

"next": "10.2.3",
tried on "@module-federation/nextjs-mf": "0.0.2"
tried on "@module-federation/nextjs-mf": "2.3.1"

Readme was geared for a private repo. Contribution guidelines, and additional docs are required

Found a TODO comment on line 63 of file src/NextFederationPlugin.js

Hello! First, congrats for the awesome work here!

This line throws error when remotes property isnt present, and its common omit it when use dynamic remotes with runtime lazyload.

TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)

Found a TODO comment on line 24 of file node-plugin/streaming/NodeRuntime.js

This works in ssr plugin, but needs to be re-implemented here.

I need to ship the loadable manifest as part of the remote entry and reattach it to next.js

Was previously done like this, which was dirty but worked.

const React = require("react");
const { Head } = require("next/document");
const path = require("path");
const crypto = require("crypto");
const generateDynamicRemoteScript = (remoteContainer) => {
  const [name, path] = remoteContainer.path.split("@");
  const remoteUrl = new URL(path);
  remoteUrl.pathname = remoteUrl.pathname.replace("ssr", "chunks");
  remoteUrl.searchParams.set("cbust", Date.now());
  return {
    [name]: React.createElement("script", {
      "data-webpack": name,
      src: remoteUrl.toString(),
      async: true,
      key: name,
    }),
  };
};

const extractChunkCorrelation = (remoteContainer, lookup, request) => {
  if (
    remoteContainer &&
    remoteContainer.chunkMap &&
    remoteContainer.chunkMap.federatedModules
  ) {
    const path = remoteContainer.path.split("@")[1];
    const [baseurl] = path.split("static/ssr");
    remoteContainer.chunkMap.federatedModules.map((federatedRemote) => {
      federatedRemote.exposes[request].forEach((remoteChunks) => {
        remoteChunks.chunks.map((chunk) => {
          if (!lookup.files.includes(new URL(chunk, baseurl).href)) {
            lookup.files.push(new URL(chunk, baseurl).href);
          }
        });
      });
    });
  } else {
    console.warn(
      "Module Federation:",
      "no federated modules in chunk map OR experiments.flushChunks is disabled"
    );
  }
};

const extractLocalRemoteImport = (remoteContainer, lookup, request) => {
  if (
    remoteContainer &&
    remoteContainer.chunkMap &&
    remoteContainer.chunkMap.loadable &&
    remoteContainer.chunkMap.loadable[request]
  ) {
    const path = remoteContainer.path.split("@")[1];
    const [baseurl] = path.split("static/ssr");
    remoteContainer.chunkMap.loadable[request].files.map((chunk) => {
      if (!lookup.files.includes(new URL(chunk, baseurl).href)) {
        lookup.files.push(new URL(chunk, baseurl).href);
      }
    });
  } else {
    console.warn(
      "Module Federation:",
      "unable to understand local remote import OR experiments.flushChunks is disabled"
    );
  }
};
const requireMethod =
  typeof __non_webpack_require__ !== "undefined"
    ? __non_webpack_require__
    : require;

let foundNextFolder = null;
if (!foundNextFolder) {
  foundNextFolder = Object.keys(requireMethod.cache).find((key) => {
    if (key.includes(".next")) {
      return true;
    }
  });
}
const manifestPath = path.join(
  foundNextFolder.split(".next")[0],
  ".next/react-loadable-manifest.json"
);
let remotes = {};
const loadableManifest = requireMethod(manifestPath);
requireMethod.cache[manifestPath].exports = new Proxy(loadableManifest, {
  get(target, prop, receiver) {
    if (!target[prop]) {
      let remoteImport = prop.split("->")[1];

      if (remoteImport) {
        let isLocalImportLike = false;
        remoteImport = remoteImport.trim();
        const [remote, module] = remoteImport.split("/");
        if (!global.loadedRemotes[remote]) {
          isLocalImportLike = true;
          console.log("needs to search for a local import", prop);
        }
        if (!remotes[remote] && global.loadedRemotes[remote]) {
          Object.assign(
            remotes,
            generateDynamicRemoteScript(global.loadedRemotes[remote])
          );
        }

        const dynamicLoadableManifestItem = {
          id: prop,
          files: [],
        };
        // TODO: figure out who is requesting module
        let remoteModuleContainerId;
        Object.values(global.loadedRemotes).find((remote) => {
          if (
            remote.chunkMap &&
            remote.chunkMap.federatedModules[0] &&
            remote.chunkMap.federatedModules[0].remoteModules
          ) {
            if (
              remote.chunkMap.federatedModules[0].remoteModules[remoteImport]
            ) {
              remoteModuleContainerId =
                remote.chunkMap.federatedModules[0].remoteModules[remoteImport];
              return true;
            }
          }
          if (
            remote.chunkMap &&
            remote.chunkMap.loadable &&
            remote.chunkMap.loadable[prop]
          ) {
            console.log("extracting local import from this loadable map", prop);
            extractLocalRemoteImport(remote, dynamicLoadableManifestItem, prop);
            return true;
          }
        });

        if (!isLocalImportLike) {
          if (
            remoteModuleContainerId &&
            process.env.NODE_ENV !== "development"
          ) {
            dynamicLoadableManifestItem.id = remoteModuleContainerId;
          }
          extractChunkCorrelation(
            global.loadedRemotes[remote],
            dynamicLoadableManifestItem,
            `./${module}`
          );
        }
        return dynamicLoadableManifestItem;
      }
    }
    return target[prop];
  },
});
const flushChunks = async (remoteEnvVar = process.env.REMOTES) => {
  remotes = {};
  const remoteKeys = Object.keys(remoteEnvVar);
  const preload = [];

  try {
    for (const key in loadableManifest) {
      const [where, what] = key.split("->");
      const request = what.trim();
      const foundFederatedImport = remoteKeys.find((remoteKey) => {
        return request.startsWith(`${remoteKey}/`);
      });
      if (foundFederatedImport) {
        const remotePreload = remoteEnvVar[foundFederatedImport]().then(
          (remoteContainer) => {
            Object.assign(
              remotes,
              generateDynamicRemoteScript(remoteContainer)
            );

            const inferRequest = what.split(`${foundFederatedImport}/`)[1];
            const request = `./${inferRequest}`;
            extractChunkCorrelation(
              remoteContainer,
              loadableManifest[key],
              request
            );
          }
        ).catch((err) => {
          console.error("Error loading remote", err);
          return Promise.resolve();
        });
        preload.push(remotePreload);
      }
    }
    await Promise.all(preload);
    return remotes;
  } catch (e) {
    console.error("Module Federation: Could not flush chunks", e);
  }
  return [];
};

export class ExtendedHead extends Head {
  constructor(props, context) {
    super(props, context);
    this.context = context;
  }
  getCssLinks(files) {
    const cssLinks = super.getCssLinks(files);
    if (Array.isArray(cssLinks)) {
      return cssLinks.map((chunk) => {
        if (!chunk) return null;
        const [prefix, asset] = chunk.props.href.split(
          this.context.assetPrefix
        );
        if (
          chunk.props.href &&
          chunk.props.href.startsWith("/") &&
          chunk.props.href.includes("http")
        ) {
          return React.cloneElement(chunk, {
            ...chunk.props,
            href: `http${chunk.props.href.split("http")[1]}`,
          });
        } else if (
          chunk.props.href &&
          chunk.props.href.includes("-fed.") &&
          this.context.assetPrefix
        ) {
          const replacedArg = this.context.assetPrefix.endsWith("/")
            ? chunk.props.href.replace(`${this.context.assetPrefix}_next/`, "")
            : chunk.props.href.replace(
                `${this.context.assetPrefix}/_next/`,
                ""
              );
          return React.cloneElement(chunk, {
            ...chunk.props,
            href: replacedArg,
          });
        } else if (asset.includes("http") && asset.startsWith("/")) {
          return React.cloneElement(chunk, {
            ...chunk.props,
            href: `http${asset.split("http")[1]}`,
          });
        } else return chunk;
      });
    }
    return cssLinks;
  }
  getDynamicChunks(files) {
    const dynamicChunks = super.getDynamicChunks(files);
    return dynamicChunks.map((chunk) => {
      if (!chunk) return null;
      if (chunk.props.src.startsWith("/") && chunk.props.src.includes("http")) {
        return React.cloneElement(chunk, {
          ...chunk.props,
          src: `http${chunk.props.src.split("http")[1]}`,
        });
      } else if (
        chunk.props.src.includes("-fed.") &&
        this.context.assetPrefix
      ) {
        const replacedArg = this.context.assetPrefix.endsWith("/")
          ? chunk.props.src.replace(`${this.context.assetPrefix}_next/`, "")
          : chunk.props.src.replace(`${this.context.assetPrefix}/_next/`, "");
        return React.cloneElement(chunk, {
          ...chunk.props,
          src: replacedArg,
        });
      }
      return chunk;
    });
  }
}

Watch mode currently untested for ssr when changes are made.

Right now all node modules are externalized in the child compiler (ssr), this means they cannot be streamed via federation.

Shared modules that are not next/,react-dom,react, or styled-jsx should be "internalized" into both host/remote

          // get share keys from user, filter out ones that need to be external
          const internalizableKeys = Object.keys(
            federationPluginOptions.shared
          ).filter((key) => {
            return // if not a key from DEFAULT_SHARE_SCOPE
          });
          // take original externals regex
          const backupExternals = config.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
            config.externals[0] = (mod, callback) => {
              if (!internalizableKeys.some((v) => mod.request.includes(v))) {
                return backupExternals(mod, callback);
              }
              return Promise.resolve();
            };
          }

Reproduction

• Remote: https://codesandbox.io/s/next-mf-remote-qe8u2
• Host: https://codesandbox.io/s/next-mf-host-5vvzu

Due to the way CSB works, please visit both and wait for them to start before inspecting the results

Steps

1. Follow steps in README
2. Observe result

Expected

Federated remote loads in host container.

Experienced

Federated remote entry loads in host container, however the modules are pulled in from relative path of the host as opposed to the remote. Because of this they 404 and MF fails to initialise.

Environment

• CodeSandbox or developing locally
• [email protected]
• @module-federation/[email protected]
• [email protected]

Additional Information

The host seems to be working correctly when trying with remote sources created in another way, e.g.: this one: https://kevinmfe.s3.amazonaws.com/app2/dist/remoteEntry.js, which comes from the following article: https://thekevinwang.com/2021/03/26/micro-frontends-nextjs/.

team, commander is missing when tried to auto upgrade the newly created nextjs app

nextjs-mf upgrade -p 3001
internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'commander'
Require stack:
- /Users/userName/.config/yarn/global/node_modules/@module-federation/nextjs-mf/bin/nextjs-mf.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/userName/.config/yarn/global/node_modules/@module-federation/nextjs-mf/bin/nextjs-mf.js:2:21)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/userName/.config/yarn/global/node_modules/@module-federation/nextjs-mf/bin/nextjs-mf.js'
  ]
}

Please see the example repo https://github.com/Pkearney2021/module-federation-next11

Expected behaviour: Bundles from the remote a requested from the correct host and port

Actual behaviour: The bundles are being requested from the current host.\

http://localhost:3001/_next/static/chunks/vendors-node_modules_react_jsx-dev-runtime_js.js
Should be
http://localhost:3000/_next/static/chunks/vendors-node_modules_react_jsx-dev-runtime_js.js

      shared: {
        react: {
          eager: true,
          singleton: true,
          strictVersion: true,
          requiredVersion: deps.react,
        },

adding the strictVersion key causes this error

Uncaught Error: Unsatisfied version 1.1.2 of shared singleton module react (required =17.0.2)

Looks like it's somehow using the version of this package instead of the specific package.

seems like this packge is just passing the shared key into the ModuleFederationPlugin

https://github.com/module-federation/nextjs-mf/blob/main/withModuleFederation.js#L70

While running app through yarn start or next start. I get error on runtime saying

Error: Container missing
while loading "./NAME_OF_COMPONENT` from ....

But this does not happen while running on development mode

yarn dev or next dev

This was also mentioned here:
module-federation/module-federation-examples#680

Any ideas? Is this known issue or is there anything that we are missing?

Thank you!

I have "app1" that exports a few components. Then the "app2" consumes those components.

When the "app2" loads everything works fine however when I navigate to another page ( and if this page uses certain components that "app1" exposes ) I get "ReferenceError: webpack_modules is not defined". If I refresh the page everything seems to be working and this error is gone.

Anyone else has this issue?

I am using:
"next": "10.0.2",
"@module-federation/nextjs-mf": "^0.0.2",
"react": "17.0.1",
"react-dom": "17.0.1",

"resolutions": {
"webpack": "5.18.0"
},

Found a TODO comment on line 26 of file node-plugin/streaming/NodeRuntime.js

If a host consumes a module that uses hooks (useEffect) the host page displays a react hook error.

Please see this minimal repo to see it fail in action.

https://github.com/Pkearney2021/nextjs-mf-side-car-hooks

To make it work just simply comment out the useEffect

When I use the connect of react-redux

Error: Could not find "store" in the context of "Connect(IndexPage)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(IndexPage) in connect options.

Refer to the issue:
reduxjs/react-redux#1569

A project that is a exact clone from Jack Harrington's nextjs-mf.
Nothing has changed. But when I try to run in Windows (only), I got this error:

But when running in linux, everything goes well.

The path in next.config.js

        // For SSR, resolve to disk path (or you can use code streaming if you have access)
        home: isServer
          ? path.resolve(
              __dirname,
              "../home/.next/server/static/runtime/remoteEntry.js"
            )
          : "home", // for client, treat it as a global
      }```

This can be killed off thanks to additonalAssets pipeline.

There is still a hacky directory crawl/listing on CSR build to find the ssr folder and side-load it into the main compilation asset.
That will be a separate issue to try and improve though

Some parts of this codebase use large template strings - we should move these to use the webpack template system like LoadFile RuntimeModule is using.

Followed through @jherr 's video

Called my consumer nextjs app next-app-2.

After following instructions and running the consumer app I got a blank screen.

fiddled around with _document.js and next.config.js - commenting out stuff here and there which got it working.

re-added execution of MergeRuntime in config file and recreated blank screen.

Opened source files and main.js... next.js static chunk and saw that the eval got broken by the next-app-2 name:

Changing the name in the config file to a camelCase fixed the issue.

Could be good to add protection from this, or add documentation not to use that sort of app name (at least in the next.config.js)

there are many TODO: comments, these should be moved over to github and comment updated to point to issue url for tracking

using [email protected] & @module-federation/[email protected], facing this issue

To resolve, I had to comment the line no #31 in withModuleFederation.js

config.externals = {
      // react: "React",   <---- this line
      // ReactDOM: "ReactDOM"
    };

and

Component import works now