I have a project that uses react and vite, and I set up a microfrontend approach using @module-federation/vite to get the remotes, also in the remotes the same stack and config. Now I want to dynamic remotes from module federation to be able to load remotes in runtime. According to module federation docs it's not possible with this plugin but it can be done using Federation Runtime. For the host app this is the load remote

import React, { useState, useEffect, Suspense, lazy } from "react";
import { init, loadRemote, registerRemotes } from "@module-federation/enhanced/runtime";
import ErrorBoundary from "../errorBoundary";


init({
  name: "remote",
  remotes: [
    {
      name: "remote",
      entry: "http://localhost:4174/remoteEntry.js",
    },
  ],
});

const useRemote = (scope: string, module: string) => {
  const LazyComponent = lazy(async () => {
    // registerRemotes([
    //   {
    //     name: "remote",
    //     entry: "http://localhost:4174/remoteEntry.js",
    //   },
    //   {
    //     name: "remoteToolbox",
    //     entry: "http://localhost:4175/remoteEntry.js",
    //   },
    // ]);

    return loadRemote<{ default: any }>(`${scope}/${module}`, {
      from: "runtime",
    }) as Promise<{ default: any }>;
  });

  return (props: any) => {
    const [{ module, scope }, setSystem] = useState<any>({});

    const setApp2 = () => {
      setSystem({
        scope: "remote",
        module: "remote-menu",
      });
    };

    const setApp3 = () => {
      setSystem({
        scope: "remoteToolbox",
        module: "remote-toolbox",
      });
    };
    return (
      <div
        style={{
          fontFamily:
            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
        }}
      >
        <h1>Dynamic System Host</h1>
        <h2>App 1</h2>
        <p>
          The Dynamic System will take advantage of Module Federation{" "}
          <strong>remotes</strong> and <strong>exposes</strong>. It will not
          load components that have already been loaded.
        </p>
        <button onClick={setApp2}>Load App 2 Widget</button>
        <button onClick={setApp3}>Load App 3 Widget</button>
        <div style={{ marginTop: "2em" }}>
          <ErrorBoundary>
            <LazyComponent {...props} />
          </ErrorBoundary>
        </div>
      </div>
    );
  };
};

export default useRemote;

To use the remote component:

function Home() {
    const App = useRemote("remote", "remote-menu");

    return (
      <ErrorBoundary>
        <Suspense>
          <App />
        </Suspense>
      </ErrorBoundary>
    );
  }

The configuration in vite for the host component is set for dummy remote:

import { fileURLToPath, URL } from "node:url";

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { federation } from '@module-federation/vite';

// /config/
export default defineConfig(({ mode }: any) => {
  const selfEnv = loadEnv(mode, process.cwd());
  const remoteSideMenuUrl = selfEnv.VITE_REMOTE_SIDE_MENU_URL;
  const remoteToolboxUrl = selfEnv.VITE_REMOTE_TOOLBOX_URL;
  return {
    server: {
      fs: {
        allow: ['.'],
      },
    },
    build: {
      target: 'esnext', minify: false, cssCodeSplit: false,
      commonjsOptions: {
        include: ["tailwind.config.js", "node_modules/**"],
      },
    },
    optimizeDeps: {
      include: ["tailwind-config"],
    },
    plugins: [
      federation({
        name: 'ShellApp',
        remotes: {
          dummy: "dummy.js",
          // remote: {
          //   type: 'module',
          //   name: 'remote',
          //   entry: remoteSideMenuUrl + '/remoteEntry.js',
          //   entryGlobalName: 'remote',
          //   shareScope: 'default',
          // },
          // remoteToolbox: {
          //   type: 'module',
          //   name: 'remoteToolbox',
          //   entry: remoteToolboxUrl + '/remoteEntry.js',
          //   entryGlobalName: 'remoteToolbox',
          //   shareScope: 'default',
          // },
        },
        exposes: {},
        filename: 'remoteEntry.js',
        //shared: ['react', 'react-dom', 'react-router-dom', "tailwindcss"],
      }),
      react(),
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
        "tailwind-config": fileURLToPath(
          new URL("./tailwind.config.js", import.meta.url)
        ),
      },
    },
  }
});

And this is the vite.conf.ts

import { federation } from '@module-federation/vite';
import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
    const selfEnv = loadEnv(mode, process.cwd());
    return {
        base: "./",
        server: {
            fs: {
                allow: ['.'],
            },
        },
        build: {
            target: 'esnext',
        },
        plugins: [
            federation({
                filename: 'remoteEntry.js',
                name: 'remote',
                exposes: {
                    './remote-menu': './src/App.tsx',
                },
                remotes: {},
                shared: ['react', 'react-dom', 'react-router-dom'],
            }),
            react(),
        ],
    };
});

The build is working fine in host, but when I open the application in the browser I get this error:

index-DcUMJ190.js:375 Error: [ Federation Runtime ]: Failed to get remoteEntry exports.
args: {"remoteName":"remote","remoteEntryUrl":"http://localhost:4174/remoteEntry.js","remoteEntryKey":"remote"}

    at error (ShellApp__mf_v__runtimeInit__mf_v__-B_MJuhnz.js:1086:11)
    at Object.assert (ShellApp__mf_v__runtimeInit__mf_v__-B_MJuhnz.js:1078:9)
    at ShellApp__mf_v__runtimeInit__mf_v__-B_MJuhnz.js:2184:16

I tried changing the configuration in remotes and host following this example repo: .tsx
But the difference is that there is vite on my side.

Did some of you try this dynamic remote approach in vite?

I have a project that uses react and vite, and I set up a microfrontend approach using @module-federation/vite to get the remotes, also in the remotes the same stack and config. Now I want to dynamic remotes from module federation to be able to load remotes in runtime. According to module federation docs it's not possible with this plugin but it can be done using Federation Runtime. For the host app this is the load remote

import React, { useState, useEffect, Suspense, lazy } from "react";
import { init, loadRemote, registerRemotes } from "@module-federation/enhanced/runtime";
import ErrorBoundary from "../errorBoundary";


init({
  name: "remote",
  remotes: [
    {
      name: "remote",
      entry: "http://localhost:4174/remoteEntry.js",
    },
  ],
});

const useRemote = (scope: string, module: string) => {
  const LazyComponent = lazy(async () => {
    // registerRemotes([
    //   {
    //     name: "remote",
    //     entry: "http://localhost:4174/remoteEntry.js",
    //   },
    //   {
    //     name: "remoteToolbox",
    //     entry: "http://localhost:4175/remoteEntry.js",
    //   },
    // ]);

    return loadRemote<{ default: any }>(`${scope}/${module}`, {
      from: "runtime",
    }) as Promise<{ default: any }>;
  });

  return (props: any) => {
    const [{ module, scope }, setSystem] = useState<any>({});

    const setApp2 = () => {
      setSystem({
        scope: "remote",
        module: "remote-menu",
      });
    };

    const setApp3 = () => {
      setSystem({
        scope: "remoteToolbox",
        module: "remote-toolbox",
      });
    };
    return (
      <div
        style={{
          fontFamily:
            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
        }}
      >
        <h1>Dynamic System Host</h1>
        <h2>App 1</h2>
        <p>
          The Dynamic System will take advantage of Module Federation{" "}
          <strong>remotes</strong> and <strong>exposes</strong>. It will not
          load components that have already been loaded.
        </p>
        <button onClick={setApp2}>Load App 2 Widget</button>
        <button onClick={setApp3}>Load App 3 Widget</button>
        <div style={{ marginTop: "2em" }}>
          <ErrorBoundary>
            <LazyComponent {...props} />
          </ErrorBoundary>
        </div>
      </div>
    );
  };
};

export default useRemote;

To use the remote component:

function Home() {
    const App = useRemote("remote", "remote-menu");

    return (
      <ErrorBoundary>
        <Suspense>
          <App />
        </Suspense>
      </ErrorBoundary>
    );
  }

The configuration in vite for the host component is set for dummy remote:

import { fileURLToPath, URL } from "node:url";

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { federation } from '@module-federation/vite';

// https://vitejs.dev/config/
export default defineConfig(({ mode }: any) => {
  const selfEnv = loadEnv(mode, process.cwd());
  const remoteSideMenuUrl = selfEnv.VITE_REMOTE_SIDE_MENU_URL;
  const remoteToolboxUrl = selfEnv.VITE_REMOTE_TOOLBOX_URL;
  return {
    server: {
      fs: {
        allow: ['.'],
      },
    },
    build: {
      target: 'esnext', minify: false, cssCodeSplit: false,
      commonjsOptions: {
        include: ["tailwind.config.js", "node_modules/**"],
      },
    },
    optimizeDeps: {
      include: ["tailwind-config"],
    },
    plugins: [
      federation({
        name: 'ShellApp',
        remotes: {
          dummy: "dummy.js",
          // remote: {
          //   type: 'module',
          //   name: 'remote',
          //   entry: remoteSideMenuUrl + '/remoteEntry.js',
          //   entryGlobalName: 'remote',
          //   shareScope: 'default',
          // },
          // remoteToolbox: {
          //   type: 'module',
          //   name: 'remoteToolbox',
          //   entry: remoteToolboxUrl + '/remoteEntry.js',
          //   entryGlobalName: 'remoteToolbox',
          //   shareScope: 'default',
          // },
        },
        exposes: {},
        filename: 'remoteEntry.js',
        //shared: ['react', 'react-dom', 'react-router-dom', "tailwindcss"],
      }),
      react(),
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
        "tailwind-config": fileURLToPath(
          new URL("./tailwind.config.js", import.meta.url)
        ),
      },
    },
  }
});

And this is the vite.conf.ts

import { federation } from '@module-federation/vite';
import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
    const selfEnv = loadEnv(mode, process.cwd());
    return {
        base: "./",
        server: {
            fs: {
                allow: ['.'],
            },
        },
        build: {
            target: 'esnext',
        },
        plugins: [
            federation({
                filename: 'remoteEntry.js',
                name: 'remote',
                exposes: {
                    './remote-menu': './src/App.tsx',
                },
                remotes: {},
                shared: ['react', 'react-dom', 'react-router-dom'],
            }),
            react(),
        ],
    };
});

The build is working fine in host, but when I open the application in the browser I get this error:

index-DcUMJ190.js:375 Error: [ Federation Runtime ]: Failed to get remoteEntry exports.
args: {"remoteName":"remote","remoteEntryUrl":"http://localhost:4174/remoteEntry.js","remoteEntryKey":"remote"}
https://module-federation.io/guide/troubleshooting/runtime/RUNTIME-001
    at error (ShellApp__mf_v__runtimeInit__mf_v__-B_MJuhnz.js:1086:11)
    at Object.assert (ShellApp__mf_v__runtimeInit__mf_v__-B_MJuhnz.js:1078:9)
    at ShellApp__mf_v__runtimeInit__mf_v__-B_MJuhnz.js:2184:16

I tried changing the configuration in remotes and host following this example repo: https://github/RussellCanfield/nx-rspack-microfrontend-demo/blob/dynamic-loader/apps/mfe-monorepo/src/app/features/Home/components/Home.tsx
But the difference is that there is vite on my side.

Did some of you try this dynamic remote approach in vite?

• reactjs
• typescript
• runtime
• vite
• webpack-module-federation

Share Improve this question Follow asked Nov 18, 2024 at 19:52 Laura DíazLaura Díaz 36711 gold badge22 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

For who may need it, this solved my issue:

init({
  name: "ShellApp",
  remotes: [
    {
      type: "module",
      name: "remote",
      entry: "http://localhost:4174/remoteEntry.js",
    },
    {
      type: "module",
      name: "remoteToolbox",
      entry: "http://localhost:4175/remoteEntry.js",
    },
  ],
});

https://github/module-federation/core/discussions/3252