Webpack Module Federation Shared Dependencies

user_1419111 0
Viewed 1376

I have this example from the github repo Dashboard. I cant understand what the shared optoin does exactly. It seems that even if i disable the shared option in the federation plugin the dependencies from each app will still be downloaded.

This is the network in both apps with the shared option off.

http://localhost:3001/

enter image description here

http://localhost:3002/

enter image description here

webpack-module-federation webpack-5 webpack
1 Answers

Probably shared dependencies aren't correctly set up in this example. The value of sharedReduce in app2/webpack.config.js is

{ "react-16.14.0": "react", "react-dom-16.14.0": "react-dom" }

instead of

{ "react": "^16.14.0", "react-dom": "^16.14.0" }

With this configuration, the page will load shared dependencies once.

Updating the value of sharedReduce using the code below will solve the issue

const sharedReduce = ['react', 'react-dom'].reduce((shared, pkg) => {
  Object.assign(shared, { [pkg]]: '^${require(pkg).version}' });
  return shared;
}, {});

Side notes: at the time of writing, app2 won't run without removing the library property in ModuleFederationPlugin configuration

user_155920480
Related