本文详解如何离线引入 Chart.js 的 UMD 构建版本，并通过 Import Maps 正确导入，解决 does not provide an export named 'default' 报错问题。
本文详解如何离线引入 chart.js 的 umd 构建版本，并通过 import maps 正确导入，解决 `does not provide an export named 'default'` 报错问题。
Chart.js 官方发布的 UMD（Universal Module Definition）构建（如 chart.umd.min.js）在浏览器中不默认导出命名空间为 default 的模块，而是将 Chart 构造函数挂载为全局变量（如 window.Chart），同时在 ES 模块环境中以命名导出（named exports）形式提供 Chart、registerables 等成员——但不提供 export default。因此，当你写 import Chart from 'chart'; 时，JavaScript 引擎会查找 default 导出，而 UMD 版本并未声明它，从而抛出 SyntaxError: The requested module 'chart' does not provide an export named 'default'。
✅ 正确做法是使用 命名空间导入（namespace import） 或 显式命名导入：
<!-- index.html -->
<script type="importmap">
{
"imports": {
"chart": "./vendor/chart.umd.min.js"
}
}
</script>
<script type="module">
// ✅ 推荐：命名空间导入（兼容所有 UMD 导出成员）
import * as ChartJS from 'chart';
// 创建图表（注意：需先获取 canvas DOM 元素）
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new ChartJS.Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
},
options: { responsive: true }
});
</script>⚠️ 注意事项：
- 不要使用 import Chart from 'chart'（报错）或 import { Chart } from 'chart'（UMD 版本未以 export { Chart } 形式导出，此写法在部分版本中也不可靠）；
- import * as ChartJS from 'chart' 是最稳妥的方式，它将整个模块内容导入为一个命名空间对象，其中 ChartJS.Chart 即为构造函数；
- 若你使用的是 Chart.js v4+，推荐显式注册组件以精简包体积（即使离线）：
import * as ChartJS from 'chart'; // 注册必要模块（例如柱状图所需） ChartJS.Chart.register(ChartJS.BarElement, ChartJS.CategoryScale, ChartJS.LinearScale, ChartJS.Title, ChartJS.Tooltip, ChartJS.Legend);
- 确保 <script type="module"> 在 <script type="importmap"> 之后加载，且 HTML 文件通过 file:// 或本地服务器（如 python3 -m http.server）打开——直接双击打开 .html 文件可能因 CORS 导致模块加载失败。
? 小结：Chart.js UMD 版本 ≠ ESM 默认导出模块。离线使用时，请始终采用 import * as X from 'chart' 方式，并通过 X.Chart 访问主类。该方式无需构建工具、不依赖 Node.js，完全满足纯前端、离线、轻量集成场景。
