Webpack - WARNING: Tried to load angular more than once. Angular JS

Question

I have built 3 separate npm modules with webpack. They all have a dependency on angular because I have the line:

var angular = require('angular');

in the angular module definitions for each npm module.

One of the modules has a dependency on the other 2:

var angular = require('angular');
var ngModule = angular.module('topModule', [
    require('dependency1'),
    require('dependency2')
]);

I believe the reason I'm getting the tried to load angular more than once error is because Angular has been included in all 3 of the bundles built by webpack.

I understand that I could have configured webpack to put angular in a separate file (e.g. vendor.js), but I thought that when I built the top level file, it would see that Angular was already included by the other 2 modules and wouldn't add it again.

How do I use `require('angular')' in all of the modules, but only have it included once in the top level module?

Webpack caches modules, it should evaluate the module only once. This warning doesn't hurt anything but this indicates that there is something wrong in the build. Some of the dependencies may have their own angular module copies, this would cause a thing like that. If semver restrictions are compatible, npm dedupe may help. You may examine the build with github.com/webpack/webpack/issues/690 Without knowing your build, nothing more specific can be suggested at this point. — Estus Flask
– Estus Flask, Commented Jul 23, 2016 at 20:22
@estus - Thanks for your reply. Yes, angular has definitely been included in each of the dependencies, as I mentioned in my original post. I just thought that webpack would be take each bundle able to detect any repeated modules and only have one version in the final output. — Joe
– Joe, Commented Jul 23, 2016 at 20:31
Nope, Webpack is dumb and just ingests everything that is fed to it from node_modules. It is a luck that it happened with Angular, other modules would just silently bloat the bundle. — Estus Flask
– Estus Flask, Commented Jul 23, 2016 at 20:44
@estus - Thanks again. Wow, I didn't realise that. I did originally have the dependency modules set up to not create a production build, so when I ran the build from the parent module it would use require for all modules and so only include angular once. The problem I found with this was that when running my tests it would also run the submodule's tests as well. Perhaps I should look into a way of excluding the tests in the submodules. — Joe
– Joe, Commented Jul 23, 2016 at 20:54

Jamil Lawrence · Accepted Answer · 2018-02-01 23:03:23Z

6

I had this issue as well. For me, it ended up being that I was using the html-webpack-plugin and passing in my own template, like so in my webpack.config.js:

plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],

In this template file, I had the line:

<script src="bundle.js"></script>

This line is automatically injected by html-webpack-plugin, and therefore I was loading my bundle twice. See plugin docs here.

Hope this helps!

edited Feb 1, 2018 at 23:03

answered Feb 1, 2018 at 22:56

Jamil Lawrence

1111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nik · Accepted Answer · 2019-07-05 14:28:11Z

0

For those who use npm, webpack encore in Symfony with multiple local packages bootstrapped by Lerna:

(webpack.config.js)

...
const path   = require('path');
...
Encore
    ...
    .addAliases({
        'angular': path.resolve(path.join(__dirname, 'node_modules', 'angular'))
    })
    ...

It will refer all require 'angular' to the root node_module folder. Just don't forget to add angular to your package.json in root and run 'npm install'. As for the local packages, 'lerna bootstrap', 'lerna exec npm install', 'npm run encore {desire enviroment}'

edited Jul 5, 2019 at 14:28

answered Jul 5, 2019 at 14:22

Nik

5287 silver badges10 bronze badges

Collectives™ on Stack Overflow

Webpack - WARNING: Tried to load angular more than once. Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related