Laravel 8报ReferenceError: $ not defined错误排查解决

问题说明 #

全新安装Laravel 8后，页面调用jQuery的$符号时控制台抛出ReferenceError: $ not defined错误，按照常规jQuery安装流程操作后，document ready逻辑块内依然无法正常调用jQuery。
注意：Laravel 6及后续版本默认移除了内置jQuery依赖，需要手动完成安装配置。

基础配置流程 #

先确认已完成以下标准配置操作：

• 安装jQuery开发依赖，项目根目录执行命令：
  npm install jquery --save-dev
• 如需使用jQuery UI组件，额外安装对应依赖：
  npm install jquery-ui --save-dev
• 在resources/js/bootstrap.js文件中配置jQuery全局挂载：

  window.$ = window.jQuery = require("jquery");
  

• 如需引入jQuery UI默认样式，在对应scss文件（如app.scss）中添加导入规则：

  @import "~jquery-ui/themes/base/all.css";
  

• 确认webpack.mix.js中的前端资源编译规则配置正确，参考示例：

  mix.js("resources/js/app.js", "public/js")
      .sass("resources/sass/app.scss", "public/css")
      .sass("resources/scss/normalize.scss", "public/css")
      .sass("resources/scss/main.scss", "public/css")
      .sourceMaps();
  

• 配置完成后执行资源编译命令：
  npm run dev

高频故障根因 #

完成上述所有配置后仍报错的，优先检查脚本引入位置与加载顺序，这是该类问题最高发的诱因：

• 错误操作：将编译生成的public/js/app.js引入标签放在</body>标签外侧，或者放在自定义的、用到$符号的业务脚本之后。此时浏览器解析到调用jQuery的业务代码时，jQuery还未完成全局挂载，就会抛出未定义错误。
• 正确操作：将app.js的引入代码放置在页面<head></head>标签内部，且所有依赖jQuery的业务脚本必须放在该引入标签之后。
  正确的blade模板引入示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <!-- 引入css资源 -->
    <script src="{{ asset('js/app.js') }}"></script>
    <!-- 后续放置其他依赖jQuery的业务脚本 -->
</head>

内容的提问来源于stack exchange，提问作者Mr. Kenneth