Posted in Uncategorized

Chart.js does not import as es6 module

   February 23, 2021  3 Comments on Chart.js does not import as es6 module

The instructions on http://www.chartjs.org/docs/latest/getting-started/integration.html show chart.js being imported as an es6 module:
snap 01 23 18-15 19 58

When I use this import statement within a module using chrome latest, it fails:

import Chart from ‘https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js‘

The error is:

Uncaught SyntaxError: The requested module does not provide an export named ‘default’

Expected Behavior

I think this is a bug, the docs say it should work. However, looking at the code, I see no es6 export.

Current Behavior

It fails with the above error.

Possible Solution

You might try converting to an es6 build using rollup for all conversions to other modules.
https://medium.com/@backspaces/es6-modules-part-1-migration-strategy-a48de0b7f112

Steps to Reproduce (for bugs)

  1. Within a browser supporting modules, create a <script type="module">
  2. Inside that, import Chart.
  3. The error will occur.
<html>
<head>
  <title>test</title>
</head>
<body>
  <script type="module">
    import Chart from 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js'

    console.log(Chart)
  </script>
</body>
</html>

Context

I am using chart.js to visualize results of agent based models. The repos are:

Environment

  • Chart.js version: latest .. 2.7.1
  • Browser name and version: chrome 63.0.3239.132
  • Link to your project: Above.

Author: Fantashit

3 thoughts on “Chart.js does not import as es6 module”

  1. 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

  2. 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!

  3. 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 😃

Comments are closed.