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

Question

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.

Answer 1

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