Import of chart.js 3 is not working

[ruslan-khomiak]

I use chart.js 3 and have a problem with import.
I get error Uncaught (in promise) SyntaxError: The requested module '../../../../web_modules/chartjs.js' does not provide an export named 'Chart'

My import looks like this import { Chart, CategoryScale, LinearScale, LineController, LineElement, PointElement, BarController, BarElement, Tooltip } from 'chart.js';

[benjamin79]

I think this is the same reason and will be fixed early next week. #1816 (reply in thread)

[FredKSchott]

Hmm, this may be different than that issue. I can see the "Chart" export inside of the new Chartjs ESM entrypoint: https://unpkg.com/browse/chart.js@3.0.0-beta.7/dist/chart.esm.js

If you feel comfortable adding logging info into your installed node_modules, it would be great to see what's going on inside of our UMD-> ESM handler. The file to add logs to is: esinstall/lib/rollup-plugins/rollup-plugin-wrap-install-targets.js and the line to add is:

        const cjsExports = isExplicitAutoDetect
          ? cjsAutoDetectExportsTrusted(val)
          : cjsAutoDetectExportsUntrusted(val);
+       console.log(normalizedFileLoc, isExplicitAutoDetect, cjsExports);

That should tell us a bit about what's going on here. Feel free to add other log messages if see anything interesting!

[ruslan-khomiak]

Hmm, this may be different than that issue. I can see the "Chart" export inside of the new Chartjs ESM entrypoint: https://unpkg.com/browse/chart.js@3.0.0-beta.7/dist/chart.esm.js

If you feel comfortable adding logging info into your installed node_modules, it would be great to see what's going on inside of our UMD-> ESM handler. The file to add logs to is: esinstall/lib/rollup-plugins/rollup-plugin-wrap-install-targets.js and the line to add is:

        const cjsExports = isExplicitAutoDetect
          ? cjsAutoDetectExportsTrusted(val)
          : cjsAutoDetectExportsUntrusted(val);
+       console.log(normalizedFileLoc, isExplicitAutoDetect, cjsExports);

That should tell us a bit about what's going on here. Feel free to add other log messages if see anything interesting!

I added logging info as you said, but nothing showed up in the console

[FredKSchott]

Oh interesting, so that means that we're not doing any tree-shaking that could cause this. This is just what esinstall/Rollup sees when it scans that package for exports.

If you run Snowpack with the --verbose flag, you'll get some other output that may help you, including what file we're installing as the top-level entrypoint for chart.js. Can you see which file inside of chart.js is being used? Does that file have a Chart export?

Also: you can use the --reload flag to trigger a fresh package install.

[ruslan-khomiak]

When running with the verbose flag, I don't see any build errors and it's hard to find the information I need in the thousands of lines in the terminal, if it's there.

I see that file have a Chart export https://prnt.sc/vysnty

Interestingly, it works for webpack 4, I want to migrate to a snowpack, but I get this error import Chart.js.

[FredKSchott]

Sorry, I can't reproduce. Just did this:

1. npx create-snowpack-app new-dir --template @snowpack/app-template-react
2. cd new-dir
3. npm install chart.js@3.0.0-beta.7
4. npm run start
5. In a code editor, add your import from above.
6. Browser refreshes, no errors. can console.log(Chart) to confirm.

[ruslan-khomiak]

It works now, thank you.
I think that the problem was not with the Chart.js, but in some kind of loading package that I use.

[PlkMarudny]

It is not working. I am using Svelte, and the simplest possible app gives the following error:

[PlkMarudny]

Converting the chart.js with rollup and importing, works, however, here is the config:

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
    input: 'node_modules/chart.js/dist/chart.js',
    output: {
        file: 'chart.js',
        format: 'esm',
    },
    plugins: [resolve(), commonjs()],
}

[tiramiseb]

I have a problem with Chart.js too, with the following error on the console:

Uncaught (in promise) TypeError: Cannot read property 'HALF_PI' of undefined
    at chartjs.helpers.v3.3.2.js:5
(anonymous)	@	chartjs.helpers.v3.3.2.js:5
Promise.then (async)		
(anonymous)	@	svelte-loadable.v1.5.1.js:650
run	@	svelte.internal.v3.38.2.js:18
(anonymous)	@	svelte.internal.v3.38.2.js:1332
flush	@	svelte.internal.v3.38.2.js:698
Promise.then (async)		
schedule_update	@	svelte.internal.v3.38.2.js:665
make_dirty	@	svelte.internal.v3.38.2.js:1355
(anonymous)	@	svelte.internal.v3.38.2.js:1387
(anonymous)	@	svelte-routing.v1.6.0.js:531
set	@	svelte.store.v3.38.2.js:25
(anonymous)	@	svelte-routing.v1.6.0.js:608
(anonymous)	@	svelte-routing.v1.6.0.js:63
navigate	@	svelte-routing.v1.6.0.js:63
onClick	@	svelte-routing.v1.6.0.js:1310

Please let me know if I can do something to help.
Unfortunately I have a short deadline so I'm gonna downgrade Chart.js to v2.9, but I would like to use v3 in a future version of my product.

[PlkMarudny]

I would sugggest going the rollup route outlined above. Just transform Chart.js file(s) using rollup and import the resulting file in your project without using a packaged version. I was able sucessfully doing that for several packages Snowpack had troubles with, Primus.io client, for example.

[tiramiseb]

I'll look into it later, however it's only a workaround 😅

Moreover, it doesn't seem as simple as it sounds, I don't grasp how to do it atm...

[PlkMarudny]

Yes, it is a workaround, for sure. But I use it with both Snowpack and Vite; I fond both having quite a lot of issues with certain libraries. It is easy to use, just run rollup with a config file above, changing your input and output files (for Chart.js no change required of course). Drop the produced file into your project, import it and voila.