Laravel Blade中访问Flowbite全局实例管理器报错解决方案

问题场景 #

在Laravel Blade项目中尝试访问Flowbite全局实例管理器获取Modal实例，编写了如下代码：

let modal;

window.addEventListener('load', function() {
    modal = FlowbiteInstances.getInstance('Modal', 'modal-id');
})

modal.show();

执行后持续报错：

688 Uncaught ReferenceError: modal is not defined 

对应的Modal HTML结构：

<div
    id="modal-id"
    tabindex="-1"
    aria-hidden="true"
    class="fixed left-0 right-0 top-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full overflow-y-auto overflow-x-hidden p-4 md:inset-0"
>
    
</div>

注：已在/resources/js/app.js中完成Flowbite导入：

import 'flowbite';

问题根源 #

window.addEventListener('load')属于异步回调逻辑，当外部的modal.show()执行时，回调函数还未触发，modal变量并未被赋值，因此抛出未定义错误。

已验证的解决方法 #

通过添加setTimeout延迟执行实例获取逻辑，问题得到解决：

<script type="application/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        setTimeout(function () {
            FlowbiteInstances.getInstance("Modal", "login-modal").show();
            // 可替换为按钮点击等触发逻辑
        }, 1000);
    });
</script>

更可靠的优化方案 #

无需依赖固定时长的延迟，Flowbite会在实例注册完成后触发flowbite:init事件，监听该事件即可确保实例已就绪：

<script type="application/javascript">
    document.addEventListener('flowbite:init', function () {
        const modal = FlowbiteInstances.getInstance('Modal', 'modal-id');
        modal.show();
    });
</script>

内容的提问来源于stack exchange，提问作者Paul Kendal