Module Federation - webpack reads wrong dependency versions from package.json

Question

Inside my Module Federation setup I have a host application that consumes a few remote apps. They all share the angular framework dependencies as singletons. This is the host's webpack.config.json file:

new ModuleFederationPlugin({
  remotes: {
    mf1: "mf1@http://localhost:3000/remoteEntry.js",
    buy: 'buy@http://localhost:3002/remoteEntry.js',
    logo: 'logo@http://localhost:3003/remoteEntry.js'
  },

  shared: {
    "@angular/core": { singleton: true, },
    "@angular/common": { singleton: true, },
    "@angular/router": { singleton: true, },
  },
}),

Inside both the host's and remote's package.json the Angular versions are defined as ^11.0.0 . The actual versions installed are: host: 11.0.0 , remote: 11.0.9. . Bow because of the definition inside package.json and the actual versions being compatible according to semantic versioning, I expected webpack to just load the highest compatible Angular version (ie 11.0.9 ) once. Instead I'm getting a warning saying Unsatisfied version 11.0.9 of shared singleton module @angular/core (required =11.0.0) . Whare does =11.0.0 come from? Why doesn't recognize webpack that the versions should be compatible?

Answer 1

I would really specify the requiredVersion in the plugin configuration and not rely on just having it read from your package.json . The issue is it will not just read your root package.json , it will also read the package.json of any modules you are using from your node_modules that themselves also require/import @angular/core . This means you will end up with an actual shared "manifest" that includes many different potential version ranges, which can cause the sort of errors you are seeing.