Vue 3 + Module Federation

Question

I am trying to build a simple micro-frontend example using Vue3 and Module Federation but I have a collision problem.

I have the code here: https://github.com/ghalex/mf-example

There are only two mf:

• container (Vue3)
• auth (Vue3)

The problem I have is that when I import the App.vue component:

// index.js - in container
import App from './components/App.vue'

// indexAuth.js - in auth
import App from './components/App.vue'

in the auth module and load the module in container the App.vue component is overwritten.

Is there any webpack settings am I missing to make sure each component is loaded separately ?

Answer 1

I found the problem, it is a webpack-dev-server v4 bug. I downgraded to v3 and everything works fine.