尽管我能输出Tooltip，但提示“未提供名为'Tooltip'的导出项”。

Question

当这段代码运行时：

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

Tooltip 成功输出到控制台，但我也收到了一个错误（在浏览器中）：

请求的模块 '/node_modules/.vite/chart_js_auto.js?v=9674d8be' 未提供名为 'Tooltip' 的导出

所以SvelteKit显然多次运行了这段代码。它为什么有时候能够工作，有时失败？如何让它一直工作？

我导入了 'chart.js/auto.esm' 而不是只有 'chart.js'，因为 SvelteKit 需要 ESM 模块。我可以使用 import { Tooltip } from 'chart.js'，这在本地可以工作，但在 Vercel 上会遇到不同的构建错误：

SyntaxError: 找不到命名导出 'Tooltip'。请求的模块 'chart.js' 是一个 CommonJS 模块，可能不支持所有 module.exports 作为命名导出。

- Leftium

Answer 1

"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。

- Leftium

---

今天我遇到了这个问题，不得不将 import { ... } from 'chart.js' 改为 import { ... } from 'chart.js/dist/chart.mjs' ，并在 vite.config.js 中更新配置对象，加入一个新的键 ssr: { noExternal: ['chart.js/**'] } 才能使构建正常工作。更多信息请参见此处。 - EHR

Answer 2

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

如果您想要特别导入Tooltip，则需要像这样导入：

import {Tooltip} from 'chart.js'

请记住，如果你这样做的话，你需要自己导入和注册你使用的每个功能。

- LeeLenalee

---

这仍然导致了一个 Vercel 构建错误，但是 import {Tooltip} from 'chart.js/dist/chart.esm' 是有效的。 - Leftium