"Does not provide an export named 'Tooltip'," even though I can output Tooltip

user_117030 0
Viewed 893

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.

enter image description here

sveltekit chart.js import javascript
2 Answers

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.

user_1170300

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

user_86829830
Related