vite icon indicating copy to clipboard operation
vite copied to clipboard

v1.0.0: Error with Nuxt as host app

Open David-Sellen opened this issue 6 months ago • 18 comments

Hi there!

I have a Nuxt application acting as host and to load remote client side Vue apps. Currently we're using @originjs/vite-plugin-federation which works OK but we would like to migrate to this library instead for other reasons.

I'm trying out @module-federation/[email protected] and it works well when i test it on my simple Vue SPA host but not when I'm trying to replace the OriginJS plugin in our Nuxt host application.

I get the following error in the browser and when I check the network traffic it does not load the RemoteEntyr.js.

Uncaught (in promise) Error: [ Federation Runtime ]: Please call init first
    at error2 (share.cjs.js:26:11)
    at Object.assert2 [as assert] (share.cjs.js:18:9)
    at loadRemote (index.cjs.js:2137:11)
    at myremote_app.js:3:32

The Vite settings in the Nuxt.config

...
vite: {
    plugins: [
      federation({
        name: "ssr-host",
        remotes: {
          myremote: {
            name: "myremote",
            shareScope: "myremote",
            entry: "/assets/remoteEntry.js",
            entryGlobalName: "myremote",
            type: "module",
          },
        },
        filename: "remoteEntry.js",
        runtimePlugins: ["./mfPlugin"], // From your example. only contains console.logs.
      })
    ],
    build: {
      target: "chrome89",
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.indexOf("/@module-federation/runtime") > -1) {
              return "mfruntime";
            }
          },
        },
      },
    },

Might there be something in this library that does not support this approach or do you guys have something that I can try out to make it work?

David-Sellen avatar Sep 02 '24 09:09 David-Sellen