Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chart.js does not import as es6 module

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:46 (25 by maintainers)

github_iconTop GitHub Comments

8reactions
krumwarecommented, Apr 3, 2019

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!

7reactions
backspacescommented, Sep 1, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I import chartjs as an es6 module? - Stack Overflow
The problem I'm facing now is that the TypeScript compiler gives me the following error: 'Chart' refers to a UMD global, but the...
Read more >
Integration | Chart.js
Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use. # ......
Read more >
[Solved]-How do I import chartjs as an es6 module?-Chart.js
The problem I'm facing now is that the TypeScript compiler gives me the following error: 'Chart' refers to a UMD global, but the...
Read more >
JavaScript modules - MDN Web Docs
This guide gives you all you need to get started with JavaScript module syntax.
Read more >
Using TypeScript or ES6 – amCharts 4 Documentation
So, if all you'd like to do is to create a Pie chart, you'll need to import both of those modules: TypeScript /...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Add time zone support

Next page

[BUG] Charts are not displayed when nested under <details> (in Firefox)