[Bug]: SSR doesn't work with module federation

[diegodepaula]

Version

System:
    OS: Linux 6.6 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 14.91 GB / 15.58 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash

Details

Story

We had a remote module and a consumer working with SSR and no issues, but after upgrading react to 19.2.3 and upgrading the @modern-js packages (plugin-bff, plugin-express, runtime, server-runtime) to 2.6.3 - 2.70.2 and @module-federation/modern-js to 0.22.1 the project keeps crashing every single time the ssr is changed to true or mode: 'stream'.

The last working SSR + module federation versions we used was version 2.68.5 for @modern-js plugin-bff, plugin-express, runtime, server-runtime and 0.18.4 for @module-federation/modern-js.

I absolutely have tried everything from the tutorials, documentation, tried to find in the issues similar cases, tried to research on the web, tried to debug but nothing solves and sometimes lead to different errors such as [Module Federation DTS] Error: The attribute remoteEntry of REMOTE_NAME must not be undefined.

At this point I don't think that it's an implementation issue, but if it is, it's possible that this is an indicator that there's something missing in the documentation, or in the worst case, the SSR isn't supported anymore along with module-federation.

We spend the last year developing our system using Modern.js framework due to the support to SSR + module federation because we have dozens of teams working on the many pages we have, and now we there's this question mark if modern.js will still maintain this feature or if it will be deprecated.

I made this repo: https://github.com/diegodepaula/modern-module and a ISSUE_REPORT.md file https://github.com/diegodepaula/modern-module/blob/main/ISSUE_REPORT.md with some information about what we've investigated so far.

It's important to mention that I've also tried implementing the remote load using

import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
import { getInstance, loadRemote } from '@module-federation/modern-js/runtime';
const instance = getInstance();
instance?.registerPlugins([lazyLoadComponentPlugin()]);
const RemoteWelcome = instance?.createLazyComponent({
  loader: () => loadRemote('remote/Welcome'),
  loading: <div>Loading...</div>,
  fallback: () => <div>Failed to load remote component</div>,
});

as well, even though there's no information about it in the docs but it also doesn't work as well. At this point I don't really know what else to try.

More information of our findings below:

Errors

Module Federation config not loading - "mfConfig.name can not be empty" error
[Module Federation DTS] Error: The attribute remoteEntry of REMOTE_NAME must not be undefined

---

Bug Description

When using the @module-federation/modern-js plugin, the module-federation.config.ts file is not being loaded correctly, causing a build error even though the configuration file exists and is syntactically valid.

Error Message

Error: [ Modern.js Module Federation ] mfConfig.name can not be empty!
    at patchMFConfig (node_modules/@module-federation/modern-js/dist/cjs/cli/configPlugin.js:123:31)

Environment

• Modern.js: 2.70.2
• @module-federation/modern-js: 0.22.1
• React: 19.0.0
• Node.js: v20.20.0
• npm: 10.8.2
• TypeScript: 5.0.4
• ts-node: 10.9.2
• OS: Ubuntu (WSL)

Reproduction

Repository

[Link to your reproduction repository once uploaded]

Steps to Reproduce

1. Create a Modern.js app with the official plugin:

npm install @module-federation/modern-js

2. Configure modern.config.ts:

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js';

export default defineConfig({
  runtime: { router: true },
  server: { 
    ssr: { mode: 'stream' },
    port: 3001 
  },
  plugins: [
    appTools({ bundler: 'webpack' }),
    moduleFederationPlugin(),
  ],
});

3. Create module-federation.config.ts in project root:

export default {
  name: 'remote',
  manifest: { filePath: 'static' },
  filename: 'static/remoteEntry.js',
  exposes: {
    './Welcome': './src/components/Welcome.tsx',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
};

4. Run npm run dev

Expected Behavior

The development server should start successfully with Module Federation configured.

Actual Behavior

Build fails with error: "mfConfig.name can not be empty!"

Analysis

Through extensive debugging, we found:

1. ✅ Config file exists and is syntactically correct
2. ✅ Plugin registers and executes
3. ✅ ts-node is installed for TypeScript config loading
4. ❌ mfConfig object is empty/undefined when passed to patchMFConfig()

The plugin's validation check fails at line 123:

if (!mfConfig.name) throw new Error(`mfConfig.name can not be empty!`);

This suggests the configuration file is not being discovered or parsed correctly before being passed to the plugin's internal functions.

Attempted Solutions

All following attempts failed with the same error:

• ✅ Used createModuleFederationConfig() helper
• ✅ Used plain object export
• ✅ Tested with both Webpack and Rspack
• ✅ Tested with and without SSR
• ✅ Installed ts-node and typescript
• ✅ Tested JavaScript config file (.js)
• ✅ Cleared all caches and reinstalled dependencies

Impact

This is a blocking issue that prevents Module Federation from working with Modern.js, despite following the official documentation exactly.

Additional Context

This configuration follows the official documentation:

• https://modernjs.dev/guides/topic-detail/module-federation/usage
• https://modernjs.dev/guides/topic-detail/module-federation/ssr

The same pattern is shown in the official examples repository but doesn't work when implemented.

Questions

1. Is there a specific configuration requirement not mentioned in the docs?
2. Are there known version incompatibilities?
3. Should the config be passed differently when using SSR with streaming mode?

---

Any guidance on resolving this issue would be greatly appreciated. Happy to provide additional debugging information if needed.

Reproduce link

https://github.com/diegodepaula/modern-module

Reproduce Steps

Create a remote module
Create a consumer module
Enable SSR (mode: 'stream') in both modules
Try to import the remote module in the consumer module
Try to access the page
If the npm run dev doesn't crash the consumer application will crash when the user tries to access it

[2heal1]

I’ll check this today—thanks for all the details!

[2heal1]

Okay i find the reason , i use bundle api to load the mf ts config, but the latest change the return . I will replace it with more stable package jiti .

[diegodepaula]

@2heal1 thanks for the quick response! I'm not sure if both issues are related but do you think that this would also solve the issue when the server successfully run but when the user tries to access throws [Module Federation DTS] Error: The attribute remoteEntry of REMOTE_NAME must not be undefined as well?

[2heal1]

Yes, the dts plugin can not get correct mfconfig which cause the issue

[2heal1]

try 0.23.0 , the issue should be solved

[diegodepaula]

Thank you for your effort trying to solve this issue. I did the upgrade in our project and we see this error now when trying to run the consumer when changing ssr config to mode: 'stream':

error Server Error - Internal server error, error = TypeError: fetch failed
at node:internal/deps/undici/undici:13510:13
at processTicksAndRejections (node:internal/process/task_queues:105:5)
at async handleScriptFetch (/Users/diegodepaula/WebstormProjects/app/node_modules/@module-federation/sdk/dist/index.cjs.cjs:859:1), req.url = http://localhost:3000/, req.headers = {
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7',
'accept-encoding': 'gzip, deflate, br, zstd',
'accept-language': 'en-US,en;q=0.9,pt;q=0.8',
connection: 'keep-alive',
host: 'localhost:3000',
'sec-ch-ua': '"Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"',
'sec-ch-ua-mobile': '?0',
'sec-ch-ua-platform': '"macOS"',
'sec-fetch-dest': 'document',
'sec-fetch-mode': 'navigate',
'sec-fetch-site': 'none',
'sec-fetch-user': '?1',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36'
}
[ Module Federation DTS ] TypeError: fetch failed
at node:internal/deps/undici/undici:13510:13
at processTicksAndRejections (node:internal/process/task_queues:105:5)
at async handleScriptFetch (/Users/diegodepaula/WebstormProjects/app/node_modules/@module-federation/sdk/dist/index.cjs.cjs:859:1) {
[cause]: Error: getaddrinfo ENOTFOUND undefinedstatic
at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:122:26)
at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
errno: -3008,
code: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'undefinedstatic'
}
} Stack trace:
at process. (/Users/diegodepaula/WebstormProjects/app/node_modules/@module-federation/dts-plugin/dist/index.js:2516:14)
at process.emit (node:events:530:35)
at process.emit (node:domain:489:12)
at process.emit.sharedData.processEmitHook.installedValue [as emit] (/Users/diegodepaula/WebstormProjects/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
at emitUnhandledRejection (node:internal/process/promises:252:13)
[ Module Federation DTS ] Process(96120) unhandledRejection, mf server will exit... Stack trace:
at process. (/Users/diegodepaula/WebstormProjects/app/node_modules/@module-federation/dts-plugin/dist/index.js:2517:14)
at process.emit (node:events:530:35)
at process.emit (node:domain:489:12)
at process.emit.sharedData.processEmitHook.installedValue [as emit] (/Users/diegodepaula/WebstormProjects/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
at emitUnhandledRejection (node:internal/process/promises:252:13)
error Command failed with exit code 1.

In CSR we load the module and render without any issues.

[diegodepaula]

And in the repo used as example https://github.com/diegodepaula/modern-module after upgrading the module-federation package we still see:
error Error: [ Modern.js Module Federation ] mfConfig.name can not be empty!
at patchMFConfig (/mnt/c/Users/Diego de Paula/.gemini/antigravity/scratch/modern-module/consumer/node_modules/@module-federation/modern-js/dist/cjs/cli/configPlugin.js:123:31)

[diegodepaula]

We're still having the issue. I've tried following the documentation, upgrading the module-federation package but still throwing the errors mentioned above... The only way I found to make it work again is downgrading modern.js, module federation and react. But this solution is not ideal because limit us to keep our project updated with moden.js and keeping the system updated.

@2heal1 the minimal repo at https://github.com/diegodepaula/modern-module is following the documentation guides and doesn't work, there were any changes in the usage that wasn't documented? Do you think it would be better if I created this issue in module-federation/core, since it seems to be an issue only with the package, and not in modern.js?

Thanks for all effort to address this issue.

[zllkjc]

@diegodepaula Let me discuss with @2heal1 tomorrow, thanks for feedback~

[2heal1]

Hmm i can not reproduce it . Maybe it's package manager issue? Try pnpm may fix it .

I will add new modern.js ssr x mf examples repo on Monday. Maybe you can wait this to check

[2heal1]

ahh here we go , try this example: https://github.com/2heal1/basic-modernjs-ssr-demo

If it still has any issues , just tell me!

[diegodepaula]

Sorry for taking so long, I was off for a while.

With your example I was able to make my minimal example work by switching to pnpm, it really seemed to have a problem with package manager. But for our project even switching it didn't worked, but at least the project wasn't crashing whenever we try to access the host url.
After further investigation I discovered the root cause: We were using SSR in the host/provider and we had data load in the provider, which kinda worked for us using this tip from #6855 (comment) . This allowed us to fetch the Skeleton structure of the remote fully SSR and make the actual fetch of data in the client while using modern's useLoaderData in the client. Tried renaming the file to .data.client.ts but were still having errors, and then when completely removed the useLoaderData and the .data.client.ts file, and made the request in the component it worked again.

I know that data fetching in the remote is not supported as mentioned by #6855 (comment) and I think that his issue can be closed, but just a last question: We will see SSR + Data fetching + Module Federation in the future?

Thank you all for solving this issue! I highly appreciate the work you guys have been doing!

[zllkjc]

currently MF already supports fetching data at the remote module in components level.

https://module-federation.io/guide/basic/data-fetch.html#data-fetching

[zllkjc]

But fetching data via useLoaderData for remote modules at the application level is not supported. In this issue, I'm not entirely sure what kind of effect you're looking to implement — perhaps you could share a demo or an architecture pic so I can better understand your requirements.