# Stimulus with dynamic import and webpack?

**URL:** <https://discuss.hotwired.dev/t/stimulus-with-dynamic-import-and-webpack/966>\
**Category:** General\
**Created:** [December 5, 2019, 2:16pm UTC](https://discuss.hotwired.dev/t/stimulus-with-dynamic-import-and-webpack/966 "2019-12-05T14:16:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![joker](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/joker/32/647_2.png) [@joker](https://discuss.hotwired.dev/u/joker)\
**Post date:** [December 5, 2019, 2:16pm UTC](https://discuss.hotwired.dev/t/stimulus-with-dynamic-import-and-webpack/966/1 "2019-12-05T14:16:06Z")

</div>

Hi guys,

To be honest, I don’t have any experience with Stimulus but I’m very interested. My biggest question right now is if there is a way to dynamically load a controller via dynamic imports and webpack only when it is actually needed (data attribute was found in the dom).

Thanks!

---

<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:** [December 6, 2019, 4:06pm UTC](https://discuss.hotwired.dev/t/stimulus-with-dynamic-import-and-webpack/966/2 "2019-12-06T16:06:36Z")

</div>

Here is an example of how I am using dynamic import for large third-party libraries

```javascript
 import { Controller } from "stimulus";

 export default class extends Controller {
   static targets = ["time"];

   connect() {
     import("moment").then(moment => {
       this.moment = moment.default;
       this.timer = requestAnimationFrame(this.updateTimer.bind(this));
     });
   }

   updateTimer() {
     this.timer = requestAnimationFrame(this.updateTimer.bind(this));
     this.timeTarget.textContent = this.moment().format(
       "dddd, MMMM Do YYYY, h:mm:ss a"
     );
   }

   disconnect() {
     cancelAnimationFrame(this.timer);
   }
 }

```

> **[stimulus-dynamic-import - CodeSandbox](https://codesandbox.io/s/stimulus-dynamic-import-z7coy?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcontrollers%2Fmoment_controller.js&theme=dark)**
>
> stimulus-dynamic-import by adrienpoly using moment, stimulus

---

<div class="post-metadata">

**Author:** ![javan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/javan/32/594_2.png) [@javan](https://discuss.hotwired.dev/u/javan)\
**Post date:** [December 6, 2019, 6:24pm UTC](https://discuss.hotwired.dev/t/stimulus-with-dynamic-import-and-webpack/966/3 "2019-12-06T18:24:53Z")

</div>

> [@joker](#):
>
> is a way to dynamically load a controller via dynamic imports and webpack only when it is actually needed (data attribute was found in the dom).

This helper library does exactly that: [GitHub - danieldiekmeier/stimulus-controller-resolver: Resolve your Stimulus Controllers any way you want – even lazy!](https://github.com/danieldiekmeier/stimulus-controller-resolver). I haven’t used it myself, but it looks solid. [via [this tweet](https://twitter.com/danjel/status/1177317936912113665)]