DEV Community

Discussion on: Webpack 5 and Module Federation - A Microfrontend Revolution

Collapse
 
joelnet profile image
JavaScript Joel

Very excited for this feature to mature.

I have been working on something similar for React Micro Frontends: @paciolan/remote-component

// Local
const HelloWorld = ({ name }) => <div>Hello {name}!</div>;

// Remote
const RemoteHelloWorld = ({ name }) => (
  <RemoteComponent
    url="https://raw.githubusercontent.com/Paciolan/remote-component/master/examples/remote-components/HelloWorld.js"
    name={name}
  />
);

// Same Same but Different
const Container = (
  <>
    <HelloWorld name="Local" />
    <RemoteHelloWorld name="Remote" />
  </>
);
Enter fullscreen mode Exit fullscreen mode