Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use splitchunk and module federation at the same time #7361

Open
498755303 opened this issue Mar 6, 2023 · 7 comments
Open

How to use splitchunk and module federation at the same time #7361

498755303 opened this issue Mar 6, 2023 · 7 comments

Comments

@498755303
Copy link 

          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 #6318 (comment)

How to use splitchunk and module federation at the same time
@xonx4l
Copy link

xonx4l commented Jul 31, 2023

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

@xonx4l
Copy link

xonx4l commented Jul 31, 2023

// 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
Copy link

xonx4l commented Jul 31, 2023

// 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
Copy link

xonx4l commented Jul 31, 2023

// 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
Copy link

dulvinw commented Aug 1, 2023

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

@AzronChan
Copy link

same issue

1 similar comment
@jsm1003
Copy link

jsm1003 commented Dec 17, 2024

same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@AzronChan @jsm1003 @dulvinw @498755303 @xonx4l