[Bug]: Module Federation Runtime with Pages + useDataLoader crashes

[zackarychapple]

Version

System:
    OS: macOS 15.3.1
    CPU: (16) arm64 Apple M4 Max
    Memory: 2.57 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 18.3
  npmPackages:
    @modern-js/app-tools: 2.65.1 => 2.65.1 
    @modern-js/runtime: 2.65.1 => 2.65.1 
    @modern-js/tsconfig: 2.65.1 => 2.65.1

Details

We have a goal of using Module Federation together with ModernJS. The repository I am creating is trying to leverage enhanced to attempt to demonstrate several capabilities.

1. We can do basic module federation of components using enhanced/runtime (this works)
2. We can do advanced module federation of routes that have server side rendered data (this does not)

Reproduce link

https://github.com/zackarychapple/modern-mf-example2

Reproduce Steps

1. start the host app
2. start the ssr-profile app
3. start the header app

When we import this remote into the header we are able to see the Async boundary as well as the delay in loading. Our initial understanding was that because this is wrapped in Await, the data fetch to the Pokemon api would be performed on the server (especially since this is being run with ssr streaming mode enabled.

const SsrProfile = React.lazy(() =>
  loadRemote('ssrprofile/ssr-profile').then((m) => {
    return m;
  }),
);

After some further digging we made an attempt to expose another federated remote that has useLoaderData which does in fact do SSR and only renders the data when pulled up manually. However when we try to federate it into the header we get an error.

const PreRenderedPokemon = React.lazy(() =>
  loadRemote('ssrprofile/rendered').then((m) => {
    return m;
  }),
);

The error

Unexpected Application Error!
useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.

Questions

1. What is the proper mechanism to do pure SSR functionality that does not expose the requests to the frontend if not useLoaderData?
2. If useLoaderData is the proper mechanism what are we missing?
3. It seems there are some documentation and example discrepancies around using the enhanced runtime and the modernjs configs.
   Should we be using this methodology in the components themselves

registerRemotes([
  {
    name: 'ssrprofile',
    entry: 'http://localhost:4002/remoteEntry.js',
  }
]);

const SsrProfile = React.lazy(() =>
  loadRemote('ssrprofile/ssr-profile').then((m) => {
    return m;
  }),
);

Or should we be using this in the module-federation.config.ts that is loaded via the moduleFederationPlugin in modern.config.ts

  remotes: {
    ssrprofile: 'ssrprofile@http://localhost:4002/remoteEntry.js',
  },

[zackarychapple]

Wondering if this is related to the work @2heal1 is doing in this PR

[zllkjc]

Oh, I know what you want. But we have not support get Data in server with module federation together now.

It's still on design phase, and we do some attempt in internal framework, maybe the feature will expose in Modern.js in a few months.

[zackarychapple]

Should we keep this open to track?

[zllkjc]

Keep open ! I added a new tag as feature request~

[joselrodrigues]

Hi @zackarychapple,

I'm experiencing the same issue here and decided to try the exact approach you used. I believe the error was resolved by adjusting the shared configuration in the producer:

shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    'react-router-dom': { singleton: true },
  }

However, it's important to note that this change unfortunately does not address the server data not being obtained.

I made this change because I found a similar problem in Remix, where having two versions of react-router-dom caused issues. You can see more details here:
remix-run/remix#8403

@zllkjc I work at a company that is planning to move away from Next.js. We heavily use Module Federation, and our plan is to transition to Modern.js. However, as you said Modern.js currently doesn't support fetching server data together with Module Federation. Do you have any suggestions for how we might achieve SSR with federated modules, even if it's not the ideal solution? Thanks in advance for your help!

[zllkjc]

Do you have any suggestions for how we might achieve SSR with federated modules

I want but I can't. Perhaps it is better to do remotes module SSR rendering separately and combine them together in the consumer.

We discuss it with module-federation team members now, I think this is a interesting feature.

[zackarychapple]

@zllkjc can we have a quick sidebar conversation about this with the Modern team on Lark to help answer questions quick?

[zackarychapple]

Hi @zackarychapple,

I'm experiencing the same issue here and decided to try the exact approach you used. I believe the error was resolved by adjusting the shared configuration in the producer:

shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    'react-router-dom': { singleton: true },
  }

However, it's important to note that this change unfortunately does not address the server data not being obtained.

I made this change because I found a similar problem in Remix, where having two versions of react-router-dom caused issues. You can see more details here: remix-run/remix#8403

@zllkjc I work at a company that is planning to move away from Next.js. We heavily use Module Federation, and our plan is to transition to Modern.js. However, as you said Modern.js currently doesn't support fetching server data together with Module Federation. Do you have any suggestions for how we might achieve SSR with federated modules, even if it's not the ideal solution? Thanks in advance for your help!

Thats a good thing to check, I'll tag @swalker326 and @zmzlois in on this too.

[joselrodrigues]

Hi @zackarychapple,

I hope you're doing well. I wanted to contribute to modernJS, so I've been running some tests and have successfully managed to serve federated modules using SSR. I've updated the repository with our current implementation approach.
I'm adding @zllkjc to this conversation to validate whether this approach is correct. Currently, it's working perfectly for us.

To test please use yarn run deploy in remote and host

Repository: https://github.com/joselrodrigues/ssr-modernjs

Best regards