页面导航时Chart.js报Cannot read properties of undefined (reading 'notifyPlugins')错误

在使用Svelte结合Chart.js开发图表组件时，页面加载显示正常，但导航离开页面时控制台抛出Cannot read properties of undefined (reading 'notifyPlugins')错误，该错误触发于Chart.js的destroy方法调用this.notifyPlugins('beforeDestroy')时，可通过以下几种方式解决：

• 正确管理Chart实例的生命周期
  在Svelte组件中，将Chart实例存储在组件状态变量中，而非局部变量，并在onDestroy钩子中手动销毁实例，确保销毁逻辑的顺序和有效性：

  <script>
    import { onMount, onDestroy } from 'svelte';
    import Chart from 'chart.js/auto';
  
    let canvasElement;
    let chartInstance;
  
    onMount(() => {
      chartInstance = new Chart(canvasElement, {
        type: 'bar',
        data: {/* 数据配置 */},
        options: {/* 图表选项 */}
      });
    });
  
    onDestroy(() => {
      // 确保实例存在且销毁方法可用时再执行销毁
      if (chartInstance && typeof chartInstance.destroy === 'function') {
        chartInstance.destroy();
        chartInstance = null; // 销毁后清空引用，避免后续无效调用
      }
    });
  </script>
  
  <canvas bind:this={canvasElement}></canvas>
  

• 检查自定义插件的上下文绑定
  若项目使用了自定义Chart.js插件（如plugins.ts），需确保插件钩子函数使用普通函数而非箭头函数，避免丢失Chart实例的this上下文：

  // 错误示例：箭头函数会导致this指向全局对象而非Chart实例
  const badPlugin = {
    beforeDestroy: () => {
      // 此处this无法访问Chart实例的notifyPlugins等方法
    }
  };
  
  // 正确示例：使用普通函数保留Chart实例上下文
  const goodPlugin = {
    beforeDestroy: function() {
      // this指向当前Chart实例，可安全调用实例方法
      this.notifyPlugins('beforeDestroy');
    }
  };
  

• 修复Svelte动作的销毁逻辑
  若通过Svelte动作（如add-chart.ts）初始化Chart，需确保动作的销毁回调正确处理实例，避免重复销毁或引用丢失：

  import Chart from 'chart.js/auto';
  
  export function addChart(node, chartConfig) {
    const chart = new Chart(node, chartConfig);
  
    return {
      destroy() {
        if (chart) {
          chart.destroy();
        }
      }
    };
  }
  

  同时避免在组件中多次绑定该动作到同一个DOM元素，防止生成多个冲突的Chart实例。

• 避免实例引用被意外清空
  排查组件内是否有异步逻辑或其他操作在onDestroy前就将Chart实例引用设为null，导致DOM销毁时Chart内部销毁逻辑执行时实例已失效。

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