Registering chartjs-plugin-zoom while using Snowpack

[davidszab]

Hello there,

I'm using Snowpack for a React application written in Typescript. I import Chart.js with import Chart from "chart.js/auto"; and would like to register the imported zoom plugin. However when I try to do that I get the following runtime error:
TypeError: Cannot read property 'HALF_PI' of undefined at http://localhost:8080/_snowpack/pkg/chartjs.helpers.v3.3.0.js:5:23

The full source code:

import React, {useEffect, useRef} from "react";
import Chart from "chart.js/auto";
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

interface ChartCardProps {
    XAxisLabels: string[],
    Datasets: Array<{
        label: string,
        data: Array<number>,
        borderColor?: string
    }>
}

export default function ChartCard({XAxisLabels, Datasets}: ChartCardProps){
    const CanvasRef = useRef<HTMLCanvasElement>(null);
    const ChartRef = useRef<Chart>();

    useEffect(() => {
        const ctx = CanvasRef.current?.getContext("2d");
        if(ctx){
            ChartRef.current = new Chart(ctx, {
                type: "line",
                data: {
                    labels: XAxisLabels,
                    datasets: Datasets.map((e) => {
                        return {
                            label: e.label,
                            data: e.data
                        }
                    })
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    intersect: true,
                    interaction: {
                      mode: "index"
                    },
                    animation: false,
                    elements: {
                      point: {
                        radius: 0
                      }
                    },
                    scales: {
                        y: {
                            type: "linear"
                        }
                    },
                    plugins: {
                     decimation: {
                       enabled: true,
                       type: "min-max"
                     }, 
                     zoom: {
                      zoom: {
                        wheel: {
                          enabled: true,
                        },
                        pinch: {
                          enabled: true
                        },
                        mode: 'xy',
                      }
                     }
                  }
                }
            });
            return () => {
                ChartRef.current.destroy();
            }
        }
    }, []);

    return (
        <div className="dashboard-card dashboard-chart">
            <canvas className="chart-canvas" ref={CanvasRef}/>
        </div>
    );
}

[kurkle]

Just to be clear, if you remove the zoom plugin, then it works?

[davidszab]

Yes, it works perfectly, it only crashes when I call Chart.register(zoomPlugin);