Shell App fails to reflect Remote App updates in SSR until hydration

[quinhatpy]

Describe the bug

Description: When running a shell application that consumes remote applications using Module Federation, updates to the remote app content are not reflected in the shell app during server-side rendering (SSR). The updated content only appears after client-side hydration, and an error is logged in the browser console.

Steps to Reproduce:

1. Setup:

• Shell app runs on port 3000.
• Remote 1 app runs on port 3001.
• Remote 2 app runs on port 3002.

2. When running pnpm start for the shell app and accessing it at localhost:3000, everything loads correctly.
3. When updating content in Remote 1 app (running on port 3001), we re-run pnpm start to rebuild and serve it.
4. After refreshing the shell app in the browser, the content from Remote 1 does not auto-update during SSR.
5. The content only updates after hydration, and we see the following error in the browser's console:

Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

6. If we block JavaScript, the content from Remote 1 is not updated.
7. If we restart the shell app using pnpm serve (not need re-build) and refresh the browser at localhost:3000, the content from Remote 1 is updated correctly.

Expected Behavior: The content of Remote 1 should auto-update immediately in the Shell App after rebuilding and running the Remote 1 app server. The SSR page should reflect these updates without needing to wait for hydration or a full shell app restart.

Reproduction

https://github.com/quinhatpy/react-18-ssr-rspack

Used Package Manager

pnpm

System Info

System:
    OS: macOS 15.3
    CPU: (11) arm64 Apple M3 Pro
    Memory: 88.42 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.10.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.128
    Edge: 133.0.3065.82
    Safari: 18.3

Validations

• [x] Read the docs.
• [x] Read the common issues list.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Make sure this is a Module federation issue and not a framework-specific issue.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

you need to clear require cache. look at the hot-reload functions in module-federation/node package

[quinhatpy]

@ScriptedAlchemy I saw the "recordDynamicRemoteEntryHashPlugin" plugin in "@module-federation/node/utils" and I tried using it, but it didn’t seem to work. I also read the "hot-reload" file in the @module-federation/node package, but I don’t know where to apply it in the quinhatpy/react-18-ssr-rspack project. Can you guide me on how to use it? I really appreciate you taking the time to help me.

[ScriptedAlchemy]

Look at dynamic node examples in federation examples otherwise dig through the nextjs code and you can see how it's implemented. Or run app in worker thread and each invocation will be clean on a new worker

[ScriptedAlchemy]

It'll take some time to get around to looking at that example again. But in general nuking the require cache should do it and resetting federation globals

[github-actions[bot]]

Stale issue message