admin管理员组

文章数量:1023251

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 asked Nov 18, 2024 at 19:52 Laura DíazLaura Díaz 3671 gold badge2 silver badges14 bronze badges
Add a comment  | 

1 Answer 1

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

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 asked Nov 18, 2024 at 19:52 Laura DíazLaura Díaz 3671 gold badge2 silver badges14 bronze badges
Add a comment  | 

1 Answer 1

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

本文标签：

版权声明：本文标题：reactjs - How to config a react vite project to microfrontend approach using dynamic remotes from module federation? - Stack Ove 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745597566a2158262.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。