Laravel Mix中使用Chart.js报Uncaught ReferenceError: Chart is not defined如何解决

问题解决方案 #

错误出现的核心原因有两点：

1. 模块作用域限制：在bootstrap.js中通过import引入的Chart仅在当前模块内部生效，未暴露到全局window对象，Blade模板中的全局脚本无法直接访问
2. 调用语法错误：初始化时使用了小写的window.chart、缺少new关键字，同时直接传入jQuery对象也会导致初始化失败

具体解决步骤 #

• 第一步：修改bootstrap.js的引入逻辑，将Chart挂载到全局window对象

import Chart from 'chart.js/auto';
// 新增下面这行代码，将Chart暴露到全局作用域
window.Chart = Chart;

• 第二步：重新编译前端资源
  执行对应环境的编译命令：npm run dev（开发环境）或者npm run build（生产环境）
• 第三步：修正Blade模板中的初始化代码
  注意两个关键点：使用new Chart（首字母大写）、要传入原生DOM节点，不能直接传jQuery对象

// 方式1：直接使用原生DOM获取
var myChart = new Chart(document.getElementById('chart'), config);

// 方式2：如果要使用jQuery选择器，需要取索引0拿到原生DOM对象
var myChart = new Chart($('#chart')[0], config);

补充注意：需要保证Blade中的初始化代码在Laravel Mix编译后的app.js加载完成后再执行，建议将初始化代码放到app.js引入标签的下方，或者使用Laravel的@stack('scripts')机制将自定义脚本推到页面底部加载，避免资源未加载完成就执行初始化逻辑。

内容的提问来源于stack exchange，提问作者Barbaro Javier