stimulus-bridge
stimulus-bridge copied to clipboard
LazyLoad controller feature isn't reliable: undefined method depending on the load speed of the controller. Solutions?
- I'm lazy-loading
testcontroller using the comment/* stimulusFetch: 'lazy' */. The controller itself loads a third-party library (maybe a big one) and has thestartmethod:
// test_controller.ts
import { Controller } from '@hotwired/stimulus';
/* stimulusFetch: 'lazy' */
export default class extends Controller<HTMLElement> {
start() { /* do things */ }
}
- The
inviewcontroller will dispatch the eventinview:appearwhen 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?