How to use splitchunk and module federation at the same time
Author: 498755303Created Mar 6, 2023Updated Dec 15, 2025
Firstly, there are some problems in your project,
home\src\components\HelloWorld.vue
props: {
- msg: String,
- default: () => 'This is a component from home'
+ msg: {
+ type: String,
+ default: () => 'This is a component from home'
}
+
}app\src\App.vue
- import HelloWorld from 'home/HelloWorld.vue'
export default {
name: 'App',
components: {
- HelloWorld
+ HelloWorld: () => import('home/HelloWorld')
}
}app\src\main.js
-import Vue from 'vue'
-import App from './App.vue'
-Vue.config.productionTip = false
-new Vue({
- render: h => h(App),
-}).$mount('#app')
+ import('bootstrap.js')app\src\bootstrap.js
+import Vue from 'vue'
+import App from './App.vue'
+Vue.config.productionTip = false
+new Vue({
+ render: h => h(App),
+}).$mount('#app')
you should correcting these problems first.
It seems there is a conflict between splitChunks and webpack module federation(I am not an expert). After deleting splitChunks config, module federation works
home\vue.config.js
module.exports = {
publicPath: 'http://localhost:8081/',
chainWebpack: (config) => {
/* module federation plugin import */
+ config.optimization.delete('splitChunks')
config
.plugin('module-federation-plugin')
.use(require('webpack').container.ModuleFederationPlugin, [{
...
Originally posted by @fangbinwei in https://github.com/vuejs/vue-cli/issues/6318#issuecomment-786603459
How to use splitchunk and module federation at the same time
Source: vuejs/vue-cli