Wednesday 31 March 2021

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



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

No comments:

Post a Comment