Laravel 10+Livewire 3中Toastr库报错的正确用法咨询

错误原因 #

Toastr库依赖jQuery，你当前仅引入了Toastr的CSS和JS文件，缺少jQuery依赖，导致触发Cannot read properties of undefined (reading 'extend')错误。

正确实现步骤 #

1. 按顺序引入依赖库
   必须先引入jQuery，再引入Toastr的JS文件，顺序不能颠倒。推荐将依赖放在项目主布局文件（如resources/views/layouts/app.blade.php）中，避免重复引入：

   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <!-- Toastr样式 -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
   <!-- Toastr核心脚本 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
   

2. 修正组件内的JS代码
   补全函数闭合逻辑，同时动态调用对应类型的Toastr方法，优化后的resources/views/livewire/personal/page-header.blade.php代码：

   <div>
       <script>
           window.addEventListener('PersonalPageMessageSuccess', event => {
               popupAlert(event.detail.title, event.detail.message, 'success');
           });
   
           function popupAlert(title, text, textType = 'info') {
               toastr.options = {
                   closeButton: true,
                   debug: false,
                   progressBar: false,
                   positionClass: 'toast-top-right',
                   onclick: null,
                   showEasing: 'swing',
                   hideEasing: 'linear',
                   closeDuration: 4400,
                   closeEasing: 'linear'
               };
               
               // 动态匹配提示类型
               toastr[textType](text, title);
           }
       </script>
   </div>
   

3. Livewire事件分发代码保持不变
   你的PHP分发逻辑无需修改：

   $this->dispatch('PersonalPageMessageSuccess', [
       'title' => 'Tasks for News',
       'message' => 'News task was created !',
   ]);
   

额外优化建议 #

• 可将jQuery、Toastr等静态资源下载至项目public目录，通过Laravel的asset()函数引入，避免依赖外部CDN的可用性问题。
• 利用Livewire 3的@script指令包裹JS代码，确保在DOM加载完成后执行：

  <div>
      @script
          <script>
              // 事件监听与提示函数代码
          </script>
      @endscript
  </div>
  

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