How to use splitchunk and module federation at the same time

[498755303]

          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

[xonx4l]

To use splitchunk and module federation you can follow the following steps .

[xonx4l]

// webpack.config.js in host application const { ModuleFederationPlugin } = require('webpack').container;

module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'hostApp', remotes: { remoteApp: 'remoteApp@http://remote-app-url/remoteEntry.js', // URL to the remote application }, shared: { // Specify the dependencies you want to share react: { singleton: true }, 'react-dom': { singleton: true }, // Add other shared dependencies here... }, }), ], };

[xonx4l]

// webpack.config.js in remote application const { ModuleFederationPlugin } = require('webpack').container;

module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remoteApp', filename: 'remoteEntry.js', exposes: { './SomeComponent': './src/SomeComponent', // Expose components you want to share }, shared: { react: { singleton: true }, 'react-dom': { singleton: true }, // Add other shared dependencies here... }, }), ], };

[xonx4l]

// webpack.config.js in both host and remote applications module.exports = { // ... optimization: { splitChunks: { chunks: 'all', minSize: 0, cacheGroups: { default: false, vendors: false, // Create a custom cache group for shared chunks shared: { name: 'shared', test: /[\/]node_modules[\/]/, priority: -10, chunks: 'all', }, }, }, }, // ... };

[dulvinw]

This fix does not work for me. Still complaining about loading the script file

[AzronChan]

same issue