“不提供名为”工具提示“的导出，”即使我可以输出工具提示

Question

当此代码运行时：

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

Tooltip成功地输出到控制台，但我也得到了一个错误(在浏览器中)：

请求的模块'/node_modules/.vite/chart_js_auto.js?v=9674d8be‘不提供名为“工具提示”的导出。

因此，SvelteKit显然是多次运行此代码。为什么它只工作一次，然后就失败了呢？我怎么才能让它一直工作？

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

SyntaxError:未找到导出“工具提示”的名称。请求的模块'chart.js‘是一个CommonJS模块，它可能不支持所有module.exports作为命名导出。

​

​

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导入之外，我还必须使用手动注册模块，因为没有使用/auto。

Answer 2

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

如果您想要专门导入工具提示，您需要导入它，如下所示：

import {Tooltip} from 'chart.js'

请记住，如果您这样做，您将需要导入和注册您正在使用的每个功能。