Why is the context provider state not shared between micro-frontends? - reactjs

Question

I am trying to split a monolithic React application into micro-frontends using Webpack Module Federation
The application relies on Context objects that are provided by the Host application. The context works as expected inside of the Host application, but not in the Remote application.
My code looks like this:
Host Application
Context and Context provider:
// TestContext.js
import React from 'libs/react';
export const TestContext = React.createContext("Not Initialized :(");
// LocalSample.js
import React from 'libs/react';
import { TestContext } from './TestContext';
export default function () {
const context = React.useContext(TestContext);
return <div>Local: {context}</div>
}
// App.js
import React, { Suspense } from 'libs/react';
import { TestContext } from './TestContext';
import RemoteSample from 'remote1/RemoteSample';
import LocalSample from './LocalSample';
export default function () {
return (
<TestContext.Provider value="Initialized :)">
<LocalSample />
<Suspense fallback={'loading...'}>
<RemoteSample />
</Suspense>
</TestContext.Provider>
);
};
Remote Application
// RemoteSample.js
import React from 'libs/react';
import { TestContext } from 'host/TestContext';
export default function () {
const context = React.useContext(TestContext);
return <div>Remote: {context}</div>
}
Sample code is also available at https://github.com/christianheld/module-federation-context-repro
The output of the application is:
Local: Initialized :)
Remote: Not Initialized :(
How can I share the context value from Host to the Remote application?

Answer 1

The trick is to put your contexts in into the shared object in the Module Federation configuration.
In my application this looks like:
shared: {
"./src/MyContext": {}
}
I found the workaround in the following video: https://www.youtube.com/watch?v=-LNcpralkjM&t=540
Please watch the video for the explanation.