chartjs/chartjs-adapter-luxon

Provide ES6 version

krumware opened this issue · 6 comments

I'm sorry if this has an obvious answer, I wanted to give this a shot with the recent update to support Chart.js 3.0.0-alpha (thanks!!) using chartjs-adapter-luxon v0.2.1.

I'm importing only at this point (commented out chart initialization to remove that variable)

import Chart from 'chart.js/dist/Chart.esm.js';
import 'luxon';
import 'chartjs-adapter-luxon';

and receiving

chartjs-adapter-luxon.js:16 Uncaught TypeError: Cannot read property 'DateTime' of undefined
    at chartjs-adapter-luxon.js:16
    at chartjs-adapter-luxon.js:10
    at chartjs-adapter-luxon.js:11

Am I missing an intermediate step?

Hmm. I'm not quite sure what would be going wrong. I was able to use this adapter with 3.0.0-alpha in my webpack project. What build system are you using?

You should probably be able to do import Chart from 'chart.js'; instead of import Chart from 'chart.js/dist/Chart.esm.js';, but I imagine they should be equivalent though and it wouldn't cause problems one way or the other

I'm also wondering what happens if you drop the import 'luxon'; line because that's not on the README and I don't have that in my personal project which works fine.

You're correct on the 'chart.js' change. It wasn't working the first time (and remembered issues from <3.0), so I switched to the esm version deliberately. I switched that back and that works fine (without chartjs-adapter-luxon).

I included the import 'luxon'; as a resolution attempt, same error happens either way.

I'm using es-dev-server from @open-wc to serve the files in development. I don't believe it does anything extra beyond module resolution, but it's my first time using this one. I'll also try building with rollup just to see what gets produced for the static version.

Here is the error I get when running a build with Rollup

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules\chartjs-adapter-luxon\dist\chartjs-adapter-luxon.js
 7: (function (global, factory) {
 8:   typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('chart.js'), require('luxon')) : typeof define === 'function' && define.amd ? define(['chart.js', 'luxon'], factory) : (global = global || self, factory(global.Chart, global.luxon));
 9: })(this, function (Chart, luxon) {
       ^
10:   'use strict';

Ahhh, I think its the distribution. It works great if I simply copy the source file and import it directly.

I didn't realize the files would be in a dist folder rather than just using the source. Maybe it would be helpful to output an esm version to match up with chart.js >3.0? Like starting here in their rollup.config: https://github.com/chartjs/Chart.js/blob/a7fe828ee1bba980e8afafb01017a9b9e651357c/rollup.config.js#L62

(side note, I came here for the luxon support since moment's ESM support is still painful)

Ah, I see. Yeah, the way the main Chart.js library works is that its rollup.config.js outputs UMD (for script users) and ES6 builds (for npm users) and then its package.json provides a pointer to the ES6 version. I'd be open to doing the same here if you want to send a PR

sorry for the silence @benmccann, been wrapped up! I'll definitely try to get to that