Micro Frontend for remix

[ajmeraaxesh]

Hi all,

I am complete new to concept of module federation and would appreciate, if someone can guide me through module federation implementation in my Remix App using Vite Compiler

I am using the following as a reference
https://github.com/originjs/vite-plugin-federation***

However I am facing cannot loading http: protocol in vite.config. Adn even trying my custom script attahced as bellow is not allowing the module to load

`export function loadRemoteModule(url, scope, module) {
return new Promise((resolve, reject) => {
const element = document.createElement('script');

    element.src = url;
    element.type = 'text/javascript';
    element.async = true;

    element.onload = () => {
        const container = window[scope]; // or use `__webpack_init_sharing__` and `init`

        container.init(__webpack_share_scopes__.default); // Initialize the shared scope

        container
            .get(module)
            .then((factory) => {
                resolve(factory());
            })
            .catch(reject);
    };

    element.onerror = reject;

    document.head.appendChild(element);
});

}
`

Please suggest a simple example for vite module federation I can refer

[jrestall]

I realize you are after Vite support but I don't have a good answer for that. If you are okay using rspack and react-router then there's a good example at https://github.com/swalker326/react-router-fog-of-war-example

[ajmeraaxesh]

Any possiblity of this getting default supported on existing remix with vite compiler?

[jrestall]

The best module federation plugin for vite that I'm aware of is at the following link and would be worth testing once the v1.0 PR is released. I'd start simple and try get it working with Remix SPA mode first.

module-federation/vite#34