本文解析 chart.js 4.x 中 `uncaught referenceerror: chart is not defined` 错误的根本原因——模块作用域限制，并提供兼容 vanilla js 的标准引入方案、代码修正示例及关键注意事项。
在使用 Chart.js 4.x 版本时，许多开发者会遇到如下控制台报错：
Uncaught ReferenceError: Chart is not defined
该错误并非因 CDN 链接失效或语法错误导致，而是源于 ES 模块（type="module"）的作用域隔离机制：当通过 <script type="module"> 加载 Chart.js（如 chart.umd.js），其导出内容默认绑定在模块作用域内，<strong>不会自动挂载到全局 window 对象上。因此，后续普通 <script type="text/javascript"> 脚本中直接调用 new Chart(...) 时，Chart 标识符在全局作用域中并不存在，从而触发引用错误。</script>
✅ 正确解法：根据使用场景选择加载方式
? 若需以全局变量形式使用 Chart（推荐 Vanilla JS 快速上手），应改用传统 <script> 标签加载 UMD 或 IIFE 构建版本，并确保其在绘图脚本之前执行：</script>
<!DOCTYPE html>
<html>
<head>
<!-- ✅ 正确：使用非 module 的 script 标签，挂载 Chart 到 window -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js"></script>
</head>
<body>
<canvas id="myChart" style="max-height:400px; max-width:500px"></canvas>
<script>
// ✅ 此处 Chart 已在全局可用
const ctx = document.getElementById('myChart').getContext('2d');
function getRandomInt(n, min, max) {
const result = [];
for (let i = 0; i < n; i++) {
result.push(Math.floor(Math.random() * (max - min) + min));
}
return result;
}
const config = {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [
{
label: 'Dataset 1',
data: getRandomInt(7, -100, 100),
borderColor: '#f22613',
tension: 0.3
},
{
label: 'Dataset 2',
data: getRandomInt(7, -100, 100),
borderColor: '#4287f5',
tension: 0.3
}
]
},
options: {
responsive: true,
plugins: {
legend: { position: 'top' }
}
}
};
new Chart(ctx, config); // ✅ 成功初始化
</script>
</body>
</html>⚠️ 注意事项与最佳实践：
-
避免混用模块与非模块脚本：不要将 type="module" 的 Chart.js 引入与普通 <script> 中的 new Chart() 混用；若坚持使用 ES 模块，请统一采用 import 语法（需服务端环境或本地 file:// 以外的 HTTP 服务）：</script>
// ✅ 模块化写法（需同为 type="module"） import { Chart } from 'https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.js'; new Chart(ctx, config); CDN 版本选择建议：优先使用 chart.umd.js（通用模块定义）而非 chart.esm.js（纯 ESM），因其对传统脚本兼容性更佳；生产环境可考虑通过 npm 安装并构建，提升包体积控制与 Tree-shaking 效率。
版本兼容性提醒：Chart.js 2.x 默认导出全局 Chart，故旧项目升级至 4.x 时务必检查加载方式——这不是 Bug，而是设计演进带来的明确作用域约定。
总结：Chart is not defined 的本质是作用域误解。理解模块化加载机制，选用匹配的引入方式（UMD + 全局脚本），即可零配置解决该问题，平稳接入 Chart.js 4.x 的新特性与性能优化。
