Chart.js: Chart.js does not import as es6 module

Per the reference to

@wbern that will be the case in the upcoming v2.8.0.

Per this update, should we expect to no longer receive the following:

Uncaught SyntaxError: The requested module './node_modules/chart.js/dist/Chart.js' does not provide an export named 'default'

when using import Chart from 'chart.js'? We are still seeing this error, but the updates here make it seem like we shouldn’t be.

Thanks!

Just a quick update: I believe a simple rollup, along with a commonJS plugin, produces a usable es6 module. The Rollup looks like:

import commonjs from 'rollup-plugin-commonjs'
import nodeResolve from 'rollup-plugin-node-resolve'
export default {
    input: './node_modules/chart.js/dist/Chart.js',
    output: {
        file: 'chart.esm.js',
        format: 'esm',
    },
    plugins: [
        nodeResolve(),
        commonjs(),
    ],
}

This is built using the chart.js npm install. You’ll also have to node install rollup-plugin-commonjs and rollup-plugin-node-resolve

I don’t have a test env for this but here’s the output: http://backspaces.net/temp/chart.esm.js I’ve built a trivial script to make sure the browser imports it correctly (yes browsers do this!):

<script type="module">
    import chart from './chart.esm.js' // default export
    console.log(chart)
</script>

If anyone uses this and it works, let us know. We also could just add to the projects workflow if it is considered useful.

Here’s the SO discussing this: https://stackoverflow.com/questions/52068933/can-rollup-plugins-convert-the-majority-of-legacy-libraries-to-es6-modules/52076713#52076713

I hope this pull request is as requested. Due to the old age of this ticket and its lively discussion, being in contrast with the small additions needed to the rollup config, I hoped I didn’t overlooked some hidden/deeper problem.

At least, I tested the new builds in a pure browser scope, as well as rollup scope (without commonjs support). Both working as expected 😃

The build has now been migrated to rollup: https://github.com/chartjs/Chart.js/pull/5904

@lpellegr I took a look at your change. It looks like your es6 version bundles moment.js. Was that a conscious decision? I think my initial inclination would have been not to include it

@krumware Thanks but Chart.js is now building with Rollup and adding support for ESM is just a matter of adding a few lines of codes in package.json and the Rollup configuration. Would be great to know why they are not included by default?

I ended up by forking the release branch, made the small changes mentioned above:

https://github.com/ipregistry/Chart.js/commit/b981ac18715f94253a502efeb852b0c4d6218db9

and published my own package:

https://www.npmjs.com/package/@ipregistry/chart.js

Per the reference to

@wbern that will be the case in the upcoming v2.8.0.

Per this update, should we expect to no longer receive the following:

Uncaught SyntaxError: The requested module './node_modules/chart.js/dist/Chart.js' does not provide an export named 'default'

when using import Chart from 'chart.js'? We are still seeing this error, but the updates here make it seem like we shouldn’t be.

Thanks!

Same here, any updates on this?

@wbern that will be the case in the upcoming v2.8.0.

@backspaces I already figured out that moment was ES6 ready, my question is about your <script> snippet: how to make Chart.esm.js to consume https://unpkg.com/moment?module, the fist line of Chart.esm.js being:

import moment from 'moment';

which fail with:

Uncaught TypeError: Failed to resolve module specifier "moment". Relative references must start with either "/", "./", or "../".

We will also need to find a way to make moment (and later luxon - or whatever) optional for the ESM build.

In order to consider this transition period where we would mix browserify and rollup, I would like to investigate if we couldn’t completely switch now to rollup without breaking changes. Here is a wip branch (rollup+esm) using rollup for all of our builds, including Chart.esm.js and Chart.esm.min.js, but also to run unit tests. It still needs lot of testing to confirm it doesn’t break anything (I will need help for that) but it looks pretty good.

@backspaces @lpellegr the current setup generates the ESM builds without moment. I’m not familiar with ES modules “in the browser” and don’t know how peer dependencies should be handled:

<script type="module">
    import chart from './dist/Chart.esm.js';
  
    // throws...
    // Uncaught TypeError: Failed to resolve module specifier "moment". Relative references must start with either "/", "./", or "../".
</script>

Any idea?

The huge advantage of converting the code to es6 modules is that then, using rollup and possibly babel (for es5) is that you can then convert to every format. It should not impact your node compatibility because rollup easily converts to commonJS.

It also lets you rollup subsets of your project, which support fewer chart types.

Can you say just what node problems you have?