Duplicate module loaded multiple times

Hi,

Let’s say I have a project with a dependency tree like (all dependencies being declared as “dependencies” in package.json)

• Main application
  • angular
  • Sub-module 1
    • angular
  • Sub-module 2
    • angular

When bundling my app, I will end-up with angular being included 2 times in my webpage. I know I can use webpack.optimize.DedupePlugin() to prevent the file being included multiple times but it will still be called two times at runtime, resulting in a warning “tried to load angular more than once”.

I feel this is the same for every sub-dependencies shared by my app dependencies, every sub-module will have its own version of angular and even though they use the exact same version, it will be loaded multiple times.

Is this tied to the philosophy of not having a flat dependency tree or am I doing something wrong ? One solution I have found is to move all the dependencies of my sub-modules as peerDependencies and add them as dependencies to my “Main application” but I feel like this is a very bad solution.

Any insights on this ?

Thanks.

[mxdubois]

You probably do want angular to be a peerDependency, since it is a framework within which your code runs. That’s how I’ve modeled it in an angular component library we use internally at my company.

You can then ensure that only one instance of angular is loaded from your main module by adding an alias for angular to your webpack config:

// webpack.config.js
import path from 'path';
// ...

export default {
  resolve: {
    alias: {
      'angular': path.resolve(path.join(__dirname, 'node_modules', 'angular'))
     },
     //...
  },
  // ...
}

For reference, another possible way to handle this is to add angular to externals and load it onto the page separately through a <script> tag or a separate bundle. This solution is useful if you’re building your submodules independently as UMD libraries.

[hungtran0203]

Is there any solution for this problem? I’m having the same problem.