chartjs-plugin-deferred: Unable to es6 import plugin

I’m using ChartJS in my Aurelia app and it works fine. I wanted to add the deferred plugin so I’ve npm installed it and added the import like so:

import Chart from 'chartjs';
import 'chartjs-plugin-deferred';

The package imports properly but the code throws errors: Uncaught TypeError: Cannot read property 'helpers' of undefined.

My guess is it’s because the plugin is trying to access the Chart object which I assume isn’t global?

(The first few lines of code try to do the following):

var Chart = window.Chart;
var helpers = Chart.helpers;

I’m honestly a little new to using import (as opposed to just stacking <script> elements) so I might be doing something wrong, but I’d love to know what?

Edit:After further testing the plugin actually seems to work properly, but I still get that error in the console which is really annoying. Any idea what could cause it?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 28 (8 by maintainers)

Commits related to this issue

Use rollup to build UMD dist files (#2) — committed to chartjs/chartjs-plugin-deferred by simonbrunel 7 years ago

Most upvoted comments

Your aurelia.json should have this at the end of the dependencies section:

{
  "name": "chart.js",
  "path": "../node_modules/chart.js/dist",
  "main": "Chart.min"
}

and the package needs to be installed with npm install --save chart.js

my package.json deps section then looks like follows:

"dependencies": {
    "aurelia-animator-css": "^1.0.1",
    "aurelia-bootstrapper": "^2.1.0",
    "bluebird": "^3.4.1",
    "chart.js": "^2.5.0",
    "requirejs": "^2.3.2",
    "text": "github:requirejs/text#latest"
  },

and everything works as expected for me. Using v 0.28.0 as well

chartjs-aurelia-example-updated.zip

zewa666 on Apr 24, 2017

Alright I’ve set up a brand new Aurelia CLI project and done nothing but add chart.js to it.

If you add “chart.js” to the dependencies array inside aurelia.json you should see the same issue I am when trying to run au run. If you change “chart.js” to “chartjs” (and supply a path) the build works.

chartjs-aurelia-example.zip

Edit: Btw, I never meant the PR should change to “chartjs”. I realise this is no longer ChartJS’s problem but rather a problem with Aurelia’s build system. I’m surprised it works for you though, I’m running the latest version of au-cli (0.28.0)

powerbuoy on Apr 24, 2017

So I’m still not sure why you experience the dot issue, but as you said that is a Aurelia CLI specific issue and not part of this. The library is named chart.js as such it should also be exported like that. And since this package does refer to the original name, renaming it in the CLI won’t help. So I wouldn’t change this PR here but rather fix it over on our side in the CLI project.

Regarding that @powerbuoy I’d be really glad if you could create a minimal example to reproduce the issue and upload it somewhere. I tried setting up an example with the Aurelia CLI including the dot in the name and everything worked. So having your example would clarify whether I did something wrong or its really an issue.

zewa666 on Apr 24, 2017

The issue is pretty simple to be solved. The library should expose a UMD compatible format, that way the consumer can define when the execution has to happen.

By having the build artifact wrapped inside UMD, we can as well declare dependencies, respectively ChartJS, and as such leverage the ES6 import syntax as well.

Over at the Aurelia CLI your aurelia.json deps would then look like:

           {
            "name": "chart.js",
            "path": "../node_modules/chart.js/dist",
            "main": "Chart.min",
            "exports": "Chart"
          },
          {
            "name": "chartjs-plugin-deferred",
            "path": "../node_modules/chartjs-plugin-deferred/dist",
            "main": "chartjs-plugin-deferred.umd",
            "deps": ["chart.js"]
          },

zewa666 on Apr 23, 2017