[Module Federation] Support Eager Sharing of React

[ScriptedAlchemy]

Describe the feature you'd like to request

Make sure that react is shared via webpack share scopes when module federation is active.

When using a sidecar build(webpack plugin that creates a third build for any expose modules) https://github.com/module-federation/nextjs-mf

You can inspect the code and see how I've been able to make it work with a loader-plugin combo

Describe the solution you'd like

I was able to put the following in _app

if (process.browser) {
  // share something & consume it to ensure the share scope is initialized
  import('@module-federation/nextjs-mf/lib/noop')
  // or manually initialise it by uncommenting below
  //try {
  //  __webpack_init_sharing__('default');
  //} catch (e) {
  //}

  Object.assign(__webpack_share_scopes__.default, {
    "next/link": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/link")),
      },
    },
    "next/head": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/head")),
      },
    },
    "next/dynamic": {
      [next.version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("next/dynamic")),
      },
    },
  });
}

and share React eagerly with MF plugin

      config.plugins.push(
        new webpack.container.ModuleFederationPlugin({
          remoteType: "var",
          remotes: {
            next1: "next1",
          },
          shared: {
            react: {
              // Notice shared ARE eager here.
              eager: true,
              singleton: true,
              requiredVersion: false,
            },
          },
        })
      );

After upgrading to next 11 and react 17, i was no longer able to use eager:true to share react properly from nextjs, I end up getting hooks errors (more than one react instance is getting initialized)

I was able to work around the problem by adding this object to the "shimmed" share scope, however I'm unable to utilize the nice import('otherapp/moduleIwant') because webpack errors saying that react cannot be found on share scope, likely due to import hoisting and the fact that I'm assigning share scope later on in the app boot sequence.

    "react": {
      [require('react/package.json').version]: {
        loaded: true,
        get: () => Promise.resolve(() => require("react")),
      },
    },

By shimming react into share scope, I'm able to use federated modules but only if I am using the low-level window.scope.get(someModuleIwant);

You can see a full example (in broken state) here https://github.com/module-federation/module-federation-examples/tree/master/nextjs

Run yarn in the monorepo root, then yarn in the /nextjs folder, then yarn start and visit localhost:3001 and you'll see hooks errors.

If next could internally eager share react or wrap its entrypoints behind a dynamic import (before react is first imported) then it would work.

Describe alternatives you've considered

I own the alternatives :P tried everything

[ScriptedAlchemy]

I might have a solution for sharing modules like react without a eager: true flag

When sharing a module, give it a fake key and manually set the import and shareKey.

This seems to keep react in the module graph as it should be, but allow sharing between federated

[18clans]

Any solution with Invalid hook call error so far? I noticed this happens when I'm using NextJS as a host.

[ScriptedAlchemy]

Plugin on app.privjs.com solves it

[18clans]

I'm just doing a personal project. Is there a solution that is free?

[ScriptedAlchemy]

Not that I'm aware of. You can use the low level api (like dynamic remotes) and that'll work. But you have to shim share scope object manually to patch react into the object.

Be warned. Going it alone is intricate. There's a reason that after 3 years, I'm still the only supplier of MF support on next.

[ScriptedAlchemy]

@18clans dm me on twitter, I'm happy to issue a license for personal use 😊 free of charge.

[18clans]

@ScriptedAlchemy Thank you for the offer but I switched gear to Web Components instead.

[ScriptedAlchemy]

We are close to solving this problem.
Currently testing two concepts.

1- we use normal module replacement, and rewrite the imports to next/router internally. Wrapping it in additional logic and exporting it back out.
2- creating a dependency factory that auto installs a async import proxy around any entrypoint automatically.

[ayrtongomes]

@ScriptedAlchemy do you have any update on this?