# Bloated webpack build when using controllers from npm packages

**URL:** <https://discuss.hotwired.dev/t/bloated-webpack-build-when-using-controllers-from-npm-packages/761>\
**Category:** General\
**Created:** [April 26, 2019, 7:41pm UTC](https://discuss.hotwired.dev/t/bloated-webpack-build-when-using-controllers-from-npm-packages/761 "2019-04-26T19:41:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wandering](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/wandering/32/503_2.png) [@wandering](https://discuss.hotwired.dev/u/wandering)\
**Post date:** [April 26, 2019, 7:41pm UTC](https://discuss.hotwired.dev/t/bloated-webpack-build-when-using-controllers-from-npm-packages/761/1 "2019-04-26T19:41:48Z")

</div>

I’m having trouble using stimulus controllers in my webpack build setup, I have imported stimulus and added my own \*\_controller.js files to the application. But when I add a controller from a npm package, my build size is doubled(or even more) because stimulus is pulled in again instead of just pulling in the controller.

Am I doing it wrong, or is this just not supported?

```
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
import Flatpickr from "stimulus-flatpickr";

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
application.register("flatpickr", Flatpickr);
```

---

<div class="post-metadata">

**Author:** ![jaredcwhite](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jaredcwhite/32/420_2.png) [@jaredcwhite](https://discuss.hotwired.dev/u/jaredcwhite)\
**Post date:** [April 26, 2019, 8:32pm UTC](https://discuss.hotwired.dev/t/bloated-webpack-build-when-using-controllers-from-npm-packages/761/2 "2019-04-26T20:32:31Z")

</div>

I wonder if it’s importing a built bundle from the module folder, rather than just the raw controller JS it needs from the module.

---

<div class="post-metadata">

**Author:** ![adrienpoly](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/adrienpoly/32/78_2.png) [@adrienpoly](https://discuss.hotwired.dev/u/adrienpoly)\
**Post date:** [April 26, 2019, 9:01pm UTC](https://discuss.hotwired.dev/t/bloated-webpack-build-when-using-controllers-from-npm-packages/761/3 "2019-04-26T21:01:45Z")

</div>

Hello @wandering

which version of Stimulus exactly are you using?  
maybe the wrapper specifies a different version? I would need to have a look at this

when you say double is it for the production bundle or development?

But for sure they should not be 2 versions of stimulus into the package

Adrien

---

<div class="post-metadata">

**Author:** ![wandering](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/wandering/32/503_2.png) [@wandering](https://discuss.hotwired.dev/u/wandering)\
**Post date:** [April 26, 2019, 9:09pm UTC](https://discuss.hotwired.dev/t/bloated-webpack-build-when-using-controllers-from-npm-packages/761/4 "2019-04-26T21:09:33Z")

</div>

Thank you both. This turned out to not be the case for your package (stimulus-flatpickr), I experience the problem with other stimulus controllers on npm, and assumed the same happened with this one.

The extra bundle size in the example was actually flatpickr.

Sorry about that.