Hydration mismatch in Modern.js Module Federation: SSR Stream fails when is in production mode

[joselrodrigues]

Version

 System:
    OS: macOS 15.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 62.91 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 135.0.7049.96
    Safari: 18.4
  npmPackages:
    @modern-js/app-tools: 2.67.1 => 2.67.1
    @modern-js/runtime: 2.67.1 => 2.67.1  

Details

I have a host and a remote which I need to load on the server side, and this works correctly if I run yarn dev on both. However, if I run IS_LOCAL=true yarn build && yarn serve on the remote and yarn dev && yarn serve on the host, it renders but complains that something is happening in the hydration that doesn't match what's on the server and falls back to client-side rendering. I don't think this is the expected behavior unless I'm making some incorrect configuration. I've searched the documentation and tried as much as possible to replicate the examples. Here is the error shown below:

Resulting in this: https://react.dev/errors/418?invariant=418

The proof of concept is very simple, just a single button in the remote module, no fancy code.

It's important to highlight that this issue doesn't appear in development mode. When both the host and remote are running in development environments, everything works as expected with proper server-side rendering.

Reproduce link

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

Reproduce Steps

git clone https://github.com/joselrodrigues/ssr-modernjs

Remote folder

cd remote
run 'yarn install'
run 'IS_LOCAL=true yarn build && yarn serve'

Host folder

cd host
run 'yarn install'
run 'yarn build && yarn serve'

So the content is only rendered on the client side, which is not the behavior I would expect unless I have a misconception about SSR Stream.

In addition to the tests mentioned above, I also performed a deployment using Nginx as a web server to rule out the possibility that the problem was related to browser extensions or specific browser configurations. I configured Nginx to serve both the host application and the remote module, maintaining the same deployment structure (remote in production mode, host in development mode). The result was the same: the hydration error occurs and the application falls back to client-side rendering, confirming that the problem is not linked to the browser environment but rather to the configuration or interaction between modules in different execution modes