0
493
Views"Does not provide an export named 'Tooltip'," even though I can output Tooltip
When this code runs:
// index.svelte
import Chart, { Tooltip } from 'chart.js/auto.esm';
console.log({ Tooltip });
Tooltip is successfully output to the console, but I also get an error (in the browser):
The requested module '/node_modules/.vite/chart_js_auto.js?v=9674d8be' does not provide an export named 'Tooltip'
So SvelteKit is obviously running this code multiple times. Why does it work once, then fail later? How do I get it to work all the time?
I imported 'chart.js/auto.esm' instead of just 'chart.js' because SvelteKit needs ESM modules. I can import { Tooltip } from 'chart.js' and this works locally, but a there's a different build error on Vercel:
SyntaxError: Named export 'Tooltip' not found. The requested module 'chart.js' is a CommonJS module, which may not support all module.exports as named exports.
2 answers
Answer question0
Tooltip needs to be imported like this (with SvelteKit):
import { Tooltip } from 'chart.js/dist/chart.esm;
Full import code:
import { Chart, registerables } from 'chart.js/dist/chart.esm';
Chart.register(...registerables);
import { Tooltip } from 'chart.js/dist/chart.esm';
Besides importing from chart.js/dist/chart.esm, I had to manually register the modules because /auto was not used.
0
This is because when you import from chart.js/auto it registers everything for you and will make it available, but only exports the chart.
If you want to specifically import the Tooltip you will need to import it like so:
import {Tooltip} from 'chart.js'
Keep in mind that if you do it like this you will need to import and register every functionality you are using yourself