Bi-directional shared files - strange behavior

[schirrel]

Hi guys I am trying to make a shared file, such as context/redux/vuex (i am using vue) but after build i got only a white page, no errors. I thought it was some sort of vuex problem, so i decide to try it as a simple file exporting a object with a function, just it. I've used bi-directional and shared-routing as example to follow, the second because of the video you've done.

The strange is that when running at dev, yarn serve works as it should, when running build and start, it presents a sample white page, no error, no clue, nothing, all files right requestes but nothing is rendered.

I took the vue-cli example and add the above code on each file:

consumer module

at src/store/index.js

export default {
    getter: ()=>{
        console.log("worked")
    }
}

at vue.config.js, add another federated module

new ModuleFederationPlugin({
        name: "store",
        filename: "store.js",
        exposes: {
          "./state": "./src/store/index.js",
        },
        // sharing code based on the installed version, to allow for multiple vendors with different versions
        shared: [
          {
            ...deps,
            vue: {
              // eager: true,
              singleton: true,
              requiredVersion: deps.vue,
            },
          }
        ],
      }),

at App.vue, called

import store from "./store";
...
  mounted() {
    console.log("store from core");
    store.getter();
  },

other module

at vue.config.js, add remote

,remotes: {
          store: "store@http://localhost:8080/store.js",
        },

at MainComponent.vue, called it

import store from "store/state";
...
 mounted() {
    console.log("store from other app");
    store.getter();
  },

I've tryid to add "./src/store/index.js" to shared at consmer, but then i got compiling error:

@vue-cli/consumer: Conflict: Multiple assets emit different content to the same filename js/src_store_index_js.js

I know that you guys already commented that are not vuejs devs, but once it runs normal at dev and the problem only occours at build i got me thinking it i could be something at the config plugin that i might miss.

i have add the files at branch here https://github.com/schirrel/module-federation-examples/tree/vue-shared-strang-behavior

Thanks again guys

[ScriptedAlchemy]

Sounds like webpack is trying to write two things to the same file name. What if you use shared and share it out like I do with /service in shared routing’s shell config?

[schirrel]

@ScriptedAlchemy when i try that way i got this error message

@vue-cli/consumer: Conflict: Multiple assets emit different content to the same filename js/src_store_index_js.js

[schirrel]

Hey @ScriptedAlchemy do you think it a good to report as bug at webpack or vue-cli?

[ScriptedAlchemy]

Yeah I think it's worth reporting. Assets shouldn't emit to the same file name unless something is configured wrong in webpack configs or under the hood a plugin or cli tool