React missing context when loaded by the "bridge" package

[intpp]

Describe the bug

It looks like there is an issue with context consumption when using the @module-federation/bridge-react package.

I have apps:

• core - shares NameProvider component for all apps (NameProvider is a react context's provider)
• host - entry point app, uses NameProvider and has remotes: core, remote-a, remote-b.
• remote-a and remote-b - Apps that consume context from core

---

host/src/App.tsx

import HeroSection from 'core/HeroSection';
import { NameProvider } from 'core/Name';
import './App.css';
import BridgeRemoteA from './components/BridgeRemoteA';
import RemoteA from './components/RemoteA';
import RemoteB from './components/RemoteB';

const App = () => {
  return (
    <NameProvider name="Rsbuild">
      <HeroSection source="host" />
      <BridgeRemoteA />
      <RemoteA />
      <RemoteB />
    </NameProvider>
  );
};

export default App;

---

• BridgeRemoteA - displays brige approach export/import
• RemoteA - displays "React.lazy + Suspense" import
• RemoteB - displays sync import

---

Result:

Also, there are some issues with dynamic-remote-type-hints-plugin:

Reproduction

https://github.com/intpp/rsbuild-module-federation-playground

Used Package Manager

pnpm

System Info

Binaries:
  Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
  pnpm: 10.4.1 - ~/Library/pnpm/pnpm

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.

[mbaric1]

I had same problem and it's not how it works. You would have to pass the context as props to bridge component and create new context. Context is held within the app tree of react itself.

Here is working example: https://github.com/mbaric1/mf-context-sharing

[intpp]

According to what I see, currently, the bridge component mounts to a separated dom element, and because of it, context doesn't work. But I need this proxy of react-router in my app. So I see a few solutions here:

• Do not do it with separated node
• Move the proxy of react-router functionality to a separate package to have the ability to use it independently

Am I right?

[ScriptedAlchemy]

correct, you are mounting apps onto divs / nodes - like single spa, when using bridges - you cannot access memory singletons like context in this mode because they are essentially separate app trees