nextjs-sidecar example is confusing

[ivanji]

Great job on creating Module Federation. No doubt this is an important piece of how things will be done from now on. And quite awesome to see an example for implementation on NextJS. But I have to say the example itself is quite confusing, or at least not explained entirely. Why have a component (src/components/Dog.js) - which lives under NextJS already - treated as a remote component within NextJS. Why this loop into itself? Is this part of how Module Federation works or just to showcase how to consume components from NextJS? Please clarify this bit.

One more thing, even in this simple example the performance is surprisingly bad, is SSR not yet working with Module Federation?

Thanks again!

[ScriptedAlchemy]

Sidecar builds attach to webpack 4 apps. It allows you to bolt on more modern and dynamic applications to older builds, like next. Next 9.5 contains all my PRs to upgrade them, so they are now webpack 5 compatible.

Perf isn't going to be great - webpack 4 has none of the apis i need for module federation. Its a shim to a solution, but it has several limitations and isn't as efficient. SSR will not work with any webpack 4 base system.

Next 9.5 works with SSR, assuming you know how to activate WP5 mode and are willing to put up with a hacky workaround specifically for Federated React-based modules

[ivanji]

Thanks Zack for your response. I haven’t had the time to play around with 9.5 yet but I’ll be checking it out this coming week. If SSR works as expected then this would just be the perfect solution.

Any link in particular I could check to ensure I follow best practice when implementing MF in Next 9.5? Thanks again. Awesome work.

[ScriptedAlchemy]

Check this repo for a NextJS folder. It's all in there. SSR works but I did have to bolt on some extra boilerplate because next is missing a async boundary internally.

Working to resolve that with the team.

[ivanji]

I've checked the examples and even though they work, they are for sharing components among two NextJS projects. Following this same example was not sufficient to understand what's required to make this work for a NextJS app consuming components from a non-nextjs application. I tried different approaches and couldn't find enough documentation under the webpack website to achieve this.

It'd be greatly helpful if you could also add those type of examples. Thanks.

[ScriptedAlchemy]

The sidecar build is this though.

Making next and non-next work together is pretty much the same process. take a next app as is, with its import mechanism, and start up a different app and import its component / repoint the remote.

if its client-side, window.remoteName.get('./header') will work, assuming the remote is on the page.

SSR works with module federation, its next.js which does not work well with webpacks feature. SSR works on any other ssr example with far less complexity.

I made an example with bi-directional hosts. In reality, ill have apps that are just remotes, like component libraries. Those I import by injecting the script to the page myself, then manually initializing the remote inside a webpack 4 host, if its a webpack 5 host ill just import it as usual.

Webpack 4 cant share automatically, so we recreate some critical dependencies we want to share between WP4 and WP5 - manually.

Something like:

global[scope].init(
    Object.assign(
      {
        react: {
          get: () => Promise.resolve(() => require("react")),
          loaded: true,
        },
      },
      global.__webpack_require__ ? global.__webpack_require__.o : {}
    )
  );

Perf is probably bad because I've put nothin in place for SSR script chunks or preloading, so it boots and loads. Havent really looked at the perf, what aspects were bad?

[ivanji]

Thanks Zach. I guess I'll just wait for proper NextJS support. Nowadays, I mainly use NextJS and asynchronously loading multiple components on the client side defeats the purpose of using NextJS in the first place.

I made an example with bi-directional hosts. In reality, ill have apps that are just remotes, like component libraries.

That's exactly what I was hoping to accomplish and thought that NextJS with Webpack 5 support already supported proper SSR. I'll keep playing with it. Thanks for the awesome contribution!