Laravel Mix中Bootstrap无法识别jQuery引发Uncaught ReferenceError错误

这个问题我之前在项目里也碰到过，本质是ES6模块的作用域隔离和Bootstrap对全局jQuery变量的依赖冲突导致的——ES6 import 导入的模块默认只在当前模块作用域内可用，不会自动挂载到window对象上，而Bootstrap的JS代码（尤其是3/4版本）会直接去全局环境找jQuery或$，所以才会抛出Uncaught ReferenceError: jQuery is not defined的错误。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：用Laravel Mix的autoload方法（最简洁，推荐） #

如果你的Laravel Mix版本是6及以上，可以直接用内置的autoload方法，它封装了webpack的ProvidePlugin，能自动把jQuery注入到全局环境：

// webpack.mix.js
const mix = require('laravel-mix');

// 添加这段配置
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
});

// 你的其他Mix配置
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

这样配置后，webpack会自动在所有需要的地方注入jQuery，同时把它挂载到window对象上，你原来的导入代码import "jquery"; import "bootstrap";可以完全保留，不用修改。

方案2：手动配置webpack的ProvidePlugin #

如果你的Mix版本较低，或者需要更自定义的配置，可以直接用webpack的ProvidePlugin：

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('webpack'); // 别忘了引入webpack

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' // 确保Bootstrap能找到全局的jQuery
        })
    ]
});

// 你的其他Mix配置
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

这个方案和方案1原理一致，只是更底层，适合需要额外配置webpack的场景。

方案3：手动将jQuery挂载到全局window对象 #

如果不想修改webpack配置，也可以在你的JS入口文件里手动把jQuery暴露到全局：

// resources/js/app.js
import $ from 'jquery';
// 把jQuery挂载到window对象，让Bootstrap能找到它
window.jQuery = window.$ = $;

// 之后再导入Bootstrap
import 'bootstrap';

这种方式更直接，但缺点是如果有多个依赖jQuery的库，你需要确保这段代码在所有依赖之前执行。

额外注意事项 #

• 确保你已经正确安装了依赖：执行npm install jquery bootstrap（如果是Bootstrap 4，可能还需要popper.js）
• 如果你用的是Bootstrap 5，注意Bootstrap 5已经完全移除了对jQuery的依赖，你根本不需要导入jQuery，直接用import 'bootstrap';即可，这可能是个容易踩的坑。

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