当这段代码运行时:
// 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 作为命名导出。
import { ... } from 'chart.js'
改为import { ... } from 'chart.js/dist/chart.mjs'
,并在 vite.config.js 中更新配置对象,加入一个新的键ssr: { noExternal: ['chart.js/**'] }
才能使构建正常工作。更多信息请参见此处。 - EHR