Issue with Hot Reload and Remote Component Re-Import breaking app

[whatisphp]

Describe the bug

I’m using the module-federation-enhanced example from the rspack-examples repository. When I run the application as provided in the example, it works correctly.

However, I encountered an issue during development when I temporarily removed the usage of the remote component ProviderButton in consumer/src/App.tsx. Here’s what happened:

Initial Code (Working):

The App.tsx originally looked like this, and the app worked fine:

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;

Temporary Change (Hot Reload Worked):

I modified the code to remove ProviderButton like this:

import './App.css';
// The remote component provided by federation_provider

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

export default App;

When I saved the file, the app hot reloaded, and the button disappeared as expected.

Reverting to the Original Code (Error):

After reverting the code back to its original state (re-adding the ProviderButton import and component usage), I saved the file, but this time I got the following error:

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 `Page`.

It seems like something breaks in the module-federation-enhanced setup when hot reloading after the ProviderButton component is removed and then re-added. Any idea what might cause this issue and how to resolve it?

Both @module-federation/rsbuild-plugin and @module-federation/enhanced/rspack gives same error.

When app crashes

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

returns empty m.default instead of function

Reproduction

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

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
    Memory: 2.74 GB / 31.87 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.7 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (132.0.2957.127)
    Internet Explorer: 11.0.22621.3527

Validations

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