Hot Reload stops working with nested remote hook imports in React

[irwinarruda]

Versions

• vite-plugin-federation: ^1.3.6
• vite: ^6.0.0
• node: v22.0.0
• pnpm: 9.0.6
• os: MacOS

Reproduction

https://github.com/irwinarruda/vite-federation-hmr

Additional Details

I have a large-scale Webpack Module Federation application. It has old React, new React, and even some legacy code. I'm trying to migrate it to Vite or RsPack for a better DX. My migration might show some rough edges in this plugin and I'm happy to try and help with some PRs when I'm used to this code base.

The problem I'm having right now is a blocker because we use this pattern a lot. So I tried creating the most minimal project to reproduce the bug. I also made a README with a step-by-step guide on how to arrive at the faulty state.

Steps to reproduce

1. Create 2 Vite apps with a basic React template host and counter
2. Add vite federation plugin to both of them
3. Expose a simple hook from counter
4. Add counter as remote in host
5. Create a new hook in a host file that uses the hook from counter
6. Use the newly created hook in a component in host.
7. Use the raw counter hook in a child component.
8. Hot Reload should not work.

// ./counter/src/useCount
export function useCounter() {
  const [count, setCount] = useState(0);
  return {...}
}

// ./host/src/useMoreCounter
export function useMoreCounter() {
   const counter = useCounter();
   ....
}

// ./host/src/App
export function App() {
  useMoreCounter();
  return <NotReloadedWhenChanged />;
}

// ./host/src/NotReloadedWhenChanged
export function NotReloadedWhenChanged() {
  // The use of useCounter here will cause the component to not hot reload
  const counter = useCounter();
  return <h2>Not Reloaded When Changed</h2>;
}

What is Expected?

When the child component changes, the Hot Reload should be triggered and the browser should update its state.

What is actually happening?

The Hot Reload seems to be triggered, but the browser state doesn't update.