SvelteKit环境下chartjs-plugin-zoom插件无法正常工作求助

在SvelteKit环境中使用chartjs-plugin-zoom（v2.0.1）搭配Chart.js（v4.3.3）时，缩放功能无法生效，但相同代码在普通Svelte环境（如REPL）可以正常运行。核心问题在于插件注册方式和SvelteKit的SSR特性适配，以下是具体解决方案：

1. 修正插件注册逻辑 #

动态导入chartjs-plugin-zoom后，得到的是包含默认导出的模块对象，直接传入Chart.register()不会生效，需要明确提取default属性：

const zoomPlugin = await import('chartjs-plugin-zoom')
Chart.register(zoomPlugin.default) // 而非Chart.register(zoomPlugin)

2. 强化客户端执行判断 #

SvelteKit默认开启SSR，Chart.js及相关插件仅能在浏览器环境运行。虽然onMount本身只会在客户端执行，额外添加browser变量判断可以避免SSR阶段的潜在报错：

import { browser } from '$app/environment';

onMount(async () => {
    if (!browser) return;
    // 后续Chart初始化代码
})

修改后的完整代码示例 #

<div>
    <canvas id="example"></canvas>
</div>

<script>
    import { onMount } from 'svelte'
    import { browser } from '$app/environment';
    import Chart from 'chart.js/auto' // Version 4.3.3

    onMount(async () => {
        if (!browser) return;
        
        const zoomPlugin = await import('chartjs-plugin-zoom') // Version 2.0.1
        Chart.register(zoomPlugin.default)

        new Chart(
            document.getElementById('example'),
            {
                type: 'line',
                data: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [{
                        label: 'My First Dataset',
                        data: [65, 59, 80, 81, 56, 55, 40],
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    }]
                },
                options: {
                    plugins: {
                        zoom: {
                            zoom: {
                                wheel: {
                                    enabled: true,
                                },
                                pinch: {
                                    enabled: true
                                },
                                mode: 'xy',
                            }
                        }
                    }
                }
            }
        )
    })
</script>

环境差异说明 #

普通Svelte环境是纯客户端打包，部分打包工具会自动处理动态导入模块的默认导出；而SvelteKit使用的Vite对模块导出的处理更严格，必须显式获取default属性才能正确注册插件。

内容的提问来源于stack exchange，提问作者M Imam Pratama