Webpack including its own dependencies in bundle

Question

I am fairly new to webpack and I have a Vue project using the vue cli. While analyzing the webpack bundle (built in production mode using vue-cli-service build) using webpack-bundle-analyzer, I found that one particular file bn.js is being included multiple times in the bundle. When running npm ls bn.js I found that it's parent dependency is webpack itself.

`-- [email protected]
  `-- [email protected]
    `-- [email protected]
      +-- [email protected]
      | +-- [email protected]
      | +-- [email protected]
      | | `-- [email protected]
      | +-- [email protected]
      | | `-- [email protected]
      | `-- [email protected]
      |   `-- [email protected]
      |     `-- [email protected]
      +-- [email protected]
      | `-- [email protected]
      +-- [email protected]
      | +-- [email protected]
      | `-- [email protected]
      |   `-- [email protected]
      `-- [email protected]
        `-- [email protected]

So my question is that why is webpack including it's own dependencies in the final bundle when webpack is added as a devDependency (earlier it was a dependency, then I changed it to devDepenency) in the project?

Or if this is the correct behavior then please point me to any docs/resources explaining this behavior.

I had this problem due to importing -- directly, and by using node packages that indirectly imported -- nodes `crypto` module. It was a bear to get rid of, since I didn't really find a way to trace which dependency was responsible. it was a lot of trial an error. eventually I replaced everything that required `crypto` with browser friendly version. Thanks to `tweetnacl` and `jsrsasign` @kjur — domoarigato, Oct 16 '20 at 20:49

score 1 · Accepted Answer · answered Aug 20 '20 at 04:25

Well it turns out that it was a npm thing. Earlier I had webpack as a dependency in package.json. Then I ran npm uninstall webpack --save and then again did npm install webpack --save-dev in order to make it a dev dependency. Turns out that it wasnt enough. I stopped getting webpack dependencies in my bundle only after I deleted my node_modules folder and then did npm install again.

score 1 · Answer 2 · answered Jul 03 '21 at 06:51

A tip for how I found which framework was the problem. In Webpack configs I set {node: false} and then I built the production code. Webpack should flag the offending framework. This can be a problem for code that was originally written for the server side and expects certain packages to be available and do not show up on package-lock.json.

If you're using something like create-react-app, then you can use a framework like react-app-rewired to customize the Webpack configs.

Happy unused code busting!

score 0 · Answer 3 · answered Sep 08 '21 at 14:43

I faced a similar issue where I was unable to find why a library called bn.js, elliptic etc. were being imported.

Turns out, it was because we were using a library called [generate-password][1] that was importing crypto and because of that I was seeing multiple modules that I never imported. Have a look at this image below.

If you ever find yourself in such a situation where you can't find the import statements for a particular library in your codebase, just do:

npm ls libname

There are cases where there are some libraries that are importing these methods internally and therefore, causing your vendor bundle to bloat. In the case of generate-password, it was importing the crypto module from node. The whole module ended up in the vendor bundle because generate-password was using one function from the crypto module.

How I avoided importing crypto:

Copied the generate-password source code into my codebase as a util.
Replaced the randomBytes function from crypto lib with a specific npm version of the randomBytes.
Remove node_modules and rebuild using yarn/npm.

Webpack including its own dependencies in bundle

3 Answers3