"Does not provide an export named 'Tooltip'," 尽管我可以输出工具提示

Question

此代码运行时：

// index.svelte   
import Chart, { Tooltip } from 'chart.js/auto.esm';
console.log({ Tooltip });

Tooltip成功输出到控制台，但是我也报错（在浏览器中）：

The requested module '/node_modules/.vite/chart_js_auto.js?v=9674d8be' does not provide an export named 'Tooltip'

所以SvelteKit显然是运行这段代码多次。为什么它能工作一次，然后就失败了？我如何让它一直工作？

我导入了 'chart.js/auto.esm' 而不是 'chart.js' 因为 SvelteKit 需要 ESM 模块。我可以 import { Tooltip } from 'chart.js' 这在本地有效，但是在 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

这是因为当您从图表导入时。js/auto它会为您注册所有内容并使其可用，但只会导出图表。

如果你想专门导入工具提示，你需要像这样导入它：

import {Tooltip} from 'chart.js'

请记住，如果您这样做，您将需要导入并注册您自己使用的每个功能

Answer 2

Tooltip 需要像这样导入（使用 SvelteKit）：

import { Tooltip } from 'chart.js/dist/chart.esm;

完整导入代码：

import { Chart, registerables } from 'chart.js/dist/chart.esm';
Chart.register(...registerables);

import { Tooltip } from 'chart.js/dist/chart.esm';

除了从 chart.js/dist/chart.esm 导入外，我还必须 manually register the modules 因为没有使用 /auto。

"Does not provide an export named 'Tooltip'," 尽管我可以输出工具提示

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

javascript

import

chart.js

sveltekit