[Bug]: Issue with Hot Reload and Module federation

[whatisphp]

Version

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
    Memory: 10.63 GB / 31.87 GB
  Browsers:
    Edge: Chromium (132.0.2957.127)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @rsbuild/core: 1.2.3 => 1.2.3
    @rsbuild/plugin-react: ^1.1.0 => 1.1.0

Details

Hot reload causes the app to crash in the example repo when the remote component usage is removed and the change is reverted.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

When app crashes

lazy(() => import("...").then(m => {console.log({m});return m;}))

returns empty m.default instead of function

Issue mentioned also here module-federation/core#3465.

Reproduce link

https://github.com/rspack-contrib/rspack-examples/tree/main/rsbuild/module-federation-enhanced

Reproduce Steps

1. run npm i in both apps
2. run npm dev in both apps
3. Go to localhost:2000 (consumer)
4. Comment or remove import and component usage in consumer/src/App.tsx

import "./App.css";
// The remote component provided by federation_provider
//import ProviderButton from "federation_provider/button";

const App = () => {
  return (
    <div className="content">
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
      <div>
        {/* <ProviderButton /> */}
      </div>
    </div>
  );
};

export default App;

4. Remove comment or discard changes

import "./App.css";
// The remote component provided by federation_provider
import ProviderButton from "federation_provider/button";

const App = () => {
  return (
    <div className="content">
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
      <div>
        <ProviderButton /
      </div>
    </div>
  );
};

export default App;

[ahabhgk]

This is the same behavior as webpack, I think this is part of the unresolved issues for module federation: not work perfectly with HMR.

In module federation, the remote modules rely on the loading of their corresponding chunk groups. When the chunk group is loaded asynchronously over the network, all the remote modules within that chunk group will be loaded together and combined into a promise. When this promise is resolved, both the loading of chunk group and the loading of remote modules will be completed.

However, in this case:

1. For the first load, the remote module will be successfully loaded into __webpack_modules__ along with the loading of the chunk group, which is as expected.

2. For the second load (with the import statement commented out), the remote module is removed from the module graph and also from __webpack_modules__, which is also as expected.

3. For the third load (after removing the comment), the update is sent to the runtime, which includes the remote module. But since the chunk group where the remote module is located has already been loaded, the remote module is not loaded into __webpack_modules__, resulting in the reported error.

Therefore, we need to provide a loading method for remote modules that does not rely on the loading of their corresponding chunk groups, or can re-trigger the loading of the chunk groups when they are re-introduced by HMR, to ensures that the remote modules are loaded into __webpack_modules__. cc @2heal1 @ScriptedAlchemy