chart.jsparceljs

Parcel build differs from localhost


I'm developing a small webapp with parcel to display some charts. I'm using

My app runs without any problems on localhost with "npm start". When deploying, there is an error "Chart is undefined".

Why is it different on dev (localhost) and production?

import { Chart } from 'chart.js/auto';
import annotationPlugin from 'chartjs-plugin-annotation';

(async function() {
    Chart.register(annotationPlugin); // Chart is undefined in production, on localhost it is working just fine
    ...

Got my code from the official documentation: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html


Solution

  • I found the solution, so for future reference, this is working:

    import { Chart, DoughnutController, ArcElement } from 'chart.js';
    import annotationPlugin from 'chartjs-plugin-annotation';
    
    (async function() {
        Chart.register(DoughnutController, ArcElement, annotationPlugin);
        ...
    

    So global import of all Charts.js "tools" and register a single plugin does not work.