stimulus-bridge icon indicating copy to clipboard operation
stimulus-bridge copied to clipboard

LazyLoad controller feature isn't reliable: undefined method depending on the load speed of the controller. Solutions?

Open gremo opened this issue 3 years ago • 0 comments

  1. I'm lazy-loading test controller using the comment /* stimulusFetch: 'lazy' */. The controller itself loads a third-party library (maybe a big one) and has the start method:
// test_controller.ts
import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller<HTMLElement> {
  start() { /* do things */ }
}
  1. The inview controller will dispatch the event inview:appear when element enters the viewport (code omitted for brevity).

If you combine both, a big issue occurs: the start method is undefined some times, depending on test controller load speed:

<div data-controller="test inview"
    data-action="inview:appear->test#start:once:stop">
</div>

When the element is on top of the page, the error has a great chance to occur. On the other hand, when controller is at bottom of the page, there is time to load the test controller and the error doesn't occur.

I'm pretty sure this occurs for the reason I'm explaining. What options do we have to solve the problem?

gremo avatar Aug 05 '22 11:08 gremo