Bloated webpack build when using controllers from npm packages

1

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);
2

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.

3

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

4

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.

1 Like