在React应用中使用bootstrap@4.6.2遇TypeError：无法读取undefined的jquery属性

Bootstrap 4的JS组件依赖jQuery，且要求jQuery必须挂载到全局window对象上——即便你导入的是包含Popper的bootstrap.bundle也不例外。你的问题根源是jQuery没有被全局暴露，导致Bootstrap无法读取到它。

以下是几种可行的解决方法：

方法1：手动挂载jQuery到window #

在导入Bootstrap之前，先导入jQuery并将其绑定到全局对象：

// 先导入jQuery并挂载到window
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 再导入Bootstrap bundle
import "bootstrap/dist/js/bootstrap.bundle";

注意：这段代码的导入顺序不能颠倒，必须先处理jQuery的全局挂载，再导入Bootstrap。

方法2：通过Webpack ProvidePlugin全局注入 #

如果你的项目使用Webpack（包括Create React App），可以通过ProvidePlugin自动将jQuery注入到全局作用域，无需手动挂载：

原生Webpack配置 #

在webpack.config.js中添加插件配置：

const webpack = require('webpack');

module.exports = {
  // ...其他现有配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

Create React App（使用craco无需eject） #

如果你用的是Create React App且不想eject，可以用craco修改配置：

1. 安装craco：npm install @craco/craco --save-dev
2. 在项目根目录创建craco.config.js：

const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        })
      ]
    }
  }
};

3. 修改package.json里的启动命令，将react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

额外注意事项 #

• 确保安装的jQuery版本符合Bootstrap 4.6.2的要求：需要jQuery 3.1.1或更高版本，执行npm install jquery@3.x --save安装兼容版本。
• 若你仅使用Bootstrap的CSS样式，不需要JS组件功能，可只导入CSS文件，无需处理jQuery相关配置。

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