“不提供名为 'Tooltip' 的导出”，即使我可以输出 Tooltip答案

【问题标题】："Does not provide an export named 'Tooltip'," even though I can output Tooltip“不提供名为 'Tooltip' 的导出”，即使我可以输出 Tooltip
【发布时间】：2022-02-08 22:34:49
【问题描述】：

这段代码运行时：

// 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 上存在不同的构建错误：

语法错误：未找到命名导出“工具提示”。请求的模块 'chart.js' 是一个 CommonJS 模块，可能不支持所有 module.exports 作为命名导出。

【问题讨论】：

标签： javascript import chart.js sveltekit

【解决方案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。

【讨论】：

【解决方案2】：

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

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

import {Tooltip} from 'chart.js'

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

【讨论】：

这仍然导致 Vercel 构建错误，但 import {Tooltip} from 'chart.js/dist/chart.esm' 有效。