Laravel Livewire中Signature Pad模态框复用报Uncaught ReferenceError

报错根因 #

这个错误是典型的DOM时序问题：模态框默认处于隐藏未渲染状态，签名板初始化JS执行时，模态框内部的canvas签名节点还未挂载到可访问DOM，直接调用SignaturePad实例方法就会触发未定义引用。

修复步骤 #

• 调整初始化时机，不要在页面加载、Livewire mount阶段直接初始化签名实例
  必须等模态框完全显示、canvas节点渲染完成后再执行初始化，以Bootstrap模态框为例，绑定模态框显示完成回调：

  // 替换为你实际使用的模态框DOM ID
  const signatureModal = document.getElementById('signature-modal')
  signatureModal.addEventListener('shown.bs.modal', () => {
      // 实例已存在时跳过初始化，避免重复绑定
      if (!window.signaturePadInstance) {
          const canvasNode = document.getElementById('signature-canvas')
          // 按原有配置初始化签名板
          window.signaturePadInstance = new SignaturePad(canvasNode, {
              backgroundColor: 'rgb(255, 255, 255)',
              penColor: 'rgb(0, 0, 0)'
          })
      }
      // 编辑场景回填已有签名数据
      if (window.signaturePadInstance && @this.storedSignaturePath) {
          window.signaturePadInstance.fromDataURL(@this.storedSignaturePath)
      }
  })
  

  如果你用的是其他UI库的模态框组件，替换对应事件即可：
  • Livewire原生模态框：监听modal-shown事件
  • Element UI/Plus Dialog：监听opened事件
  • Ant Design Modal：监听afterOpenChange且打开状态为true的回调
• 增加Livewire重渲染兼容逻辑
  监听Livewire的DOM更新完成钩子，避免组件重渲染后实例丢失：

  Livewire.hook('message.processed', (_, component) => {
      // 仅处理当前签名板组件的更新
      if (component.id !== @this.id) return
      const canvasNode = document.getElementById('signature-canvas')
      if (!canvasNode || window.signaturePadInstance) return
      // 节点存在但实例丢失时重新初始化
      window.signaturePadInstance = new SignaturePad(canvasNode, {
          backgroundColor: 'rgb(255, 255, 255)',
          penColor: 'rgb(0, 0, 0)'
      })
  })
  

• 模态框关闭时重置状态
  绑定模态框关闭完成回调，清空签名内容，避免下次打开时出现缓存异常：

  signatureModal.addEventListener('hidden.bs.modal', () => {
      if (window.signaturePadInstance) {
          window.signaturePadInstance.clear()
      }
  })
  

额外排查点：检查代码里有没有在canvas节点外提前调用signaturePad.toDataURL()、signaturePad.fromDataURL()这类实例方法，所有实例方法的调用必须放在初始化逻辑之后。

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