React中集成Bootstrap报错：无法解析jQuery模块

刚碰到过类似的问题，我来帮你理清楚怎么解决～你已经安装了jQuery但还是报错，核心原因是Webpack（React项目默认的打包工具）没有把jQuery注册为全局变量，而Bootstrap的JS文件在加载时会直接尝试访问全局的$或jQuery，所以才会出现找不到的错误。

下面分两种场景给你具体的解决方案：

一、如果你的项目是用Create React App（CRA）创建的 #

CRA默认不让直接修改Webpack配置，我们需要借助craco来实现全局引入：

• 先安装craco依赖：

  npm install @craco/craco --save-dev
  

• 在项目根目录新建一个craco.config.js文件，写入以下配置：

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

• 修改package.json里的启动脚本，把原来的react-scripts替换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
  

• 重启你的开发服务器，重新编译项目。

二、如果你的项目是自定义Webpack配置的 #

直接修改项目根目录的webpack.config.js即可：

• 在配置文件中引入webpack，并添加ProvidePlugin插件：

  const webpack = require('webpack');
  
  module.exports = {
    // 保留你原有的其他配置项...
    plugins: [
      // 新增这个插件，全局注入jQuery
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  };
  

• 重新运行Webpack编译命令即可。

最后验证 #

在项目的入口文件（比如src/index.js）里导入Bootstrap的JS文件：

import 'bootstrap/dist/js/bootstrap.js';

启动项目后，如果没有再出现找不到jQuery的报错，就说明配置生效了。

另外提一句：如果你的项目可以升级到Bootstrap 5的话，其实Bootstrap 5已经完全移除了jQuery依赖，这样能省掉这些配置步骤，但考虑到你是接手的存量项目，还是优先用上面的方法适配现有版本比较稳妥。

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