Search code examples
javascriptvue.jswebpackmodulevue-cli

Vue CLI Module Federation is component is not found in the Host App

im implementing Module Federation in two Vue CLI Projects

Container App at: http://localhost:8082/ Component App at: http://localhost:8083/ I set up the ModuleFederation plugin in both apps, dont think there is a Problem with That: Component:

plugins: [
    new ModuleFederationPlugin({
        name: "data",
        filename: "remoteEntry.js",
        remotes: {},
        exposes: {
            './Bata' : './src/Bata.vue',

        },
        shared: {}
    }),
],

Container:

plugins: [
    new ModuleFederationPlugin({
        name: "appcontainer",
        filename: "remoteEntry.js",
        remotes: {
            "data" : "data@http://localhost:8083/remoteEntry.js" // Test app url see above
        },
        exposes: {},
        shared: {}
    }),
],

The components is getting served under: http://localhost:8083/remoteEntry.js: enter image description here

The Problem i encounter is when i try to use the component in the Container App:

enter image description here

It seems like the component is not found, what i noticed tho the request for the container goes to the Container app not to the Component app. Not sure if thats a problem or a normal behavior and something else is not working correctly.

enter image description here

8082 is the Container app, if i open the same url with 8083 (Component app) the component is there.

enter image description here

Solution

  • You get this error if PublicPath is not correct. You can fix this issue by setting it to "auto" as shown below. "auto" will automatically determine the public path.

    output: {
  publicPath: 'auto',
},

    Please refer below link for more details Output | webpack