Federation Runtime loadRemote works on React v19 but not v18
Closed this issue · 1 comments
Cybernetixs commented
I've got a producer mfe that outputs a very small App.tsx module.
I have 2 consumers both using loadRemote from @module-federation/enhanced/runtime to
load the remote from the producer.
The React v19 consumer works fine, it loads and displays the producer App
The React v18 consumer gives the error from the producer App :
Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}).
This Consumer code below is identical for both versions but only works on React v19.
import { lazy, Suspense } from 'react';
import { registerRemotes, loadRemote, init } from '@module-federation/enhanced/runtime';
const remoteApp = 'federation_provider';
const remoteAppString = 'federation_provider/MicroApp';
init({
name: 'mfe_web_shell',
remotes: [
{
name: remoteApp,
entry: 'http://192.168.1.81:3001/mf-manifest.json',
},
],
});
registerRemotes([
{
name: remoteApp,
entry: 'http://192.168.1.81:3001/mf-manifest.json',
},
]);
export const TestApp = () => {
const LazyRemote = lazy(async () => {
return loadRemote<{ default: any }>(remoteAppString, {
from: 'runtime',
}) as Promise<{ default: any }>;
});
return (
<div>
<h1>MFE Test</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyRemote />
</Suspense>
</div>
);
};
export default TestApp;
And this is the Producer App that is imported and displays on v19 consumer but not v18:
export const ProducerApp = () => {
return (
<div>
<h1>Child App : Federation Provider</h1>
</div>
);
};
export default ProducerApp;
Cybernetixs commented
Nevermind, I figured it out. It was a shared dependency version issue....SMH