React中用jQuery关闭Bootstrap modal报modal is not a function如何解决

该报错本质是Bootstrap的jQuery扩展方法未正确挂载到你导入的jQuery实例上，原因通常有两点：导入顺序错误、webpack模块隔离导致Bootstrap无法获取全局jQuery对象。

方案1：调整导入顺序（最快验证方案） #

必须先导入jQuery，再导入Bootstrap，确保Bootstrap加载时可以拿到jQuery实例挂载扩展方法：

import $ from 'jquery'; 
window.$ = window.jQuery = $; // 手动挂载到全局，确保Bootstrap可识别
import 'bootstrap';

调整后再执行$('#exampleModal').modal('hide')即可正常调用。

方案2：webpack配置全局注入jQuery（长期稳定方案） #

如果调整导入顺序后仍报错，可通过webpack配置让jQuery全局可用，无需每次手动挂载：

1. 安装expose-loader（若使用ProvidePlugin则无需安装）

npm install expose-loader --save-dev

2. 两种配置方式二选一即可：

• 方式A：使用ProvidePlugin（无需修改代码导入）
  在webpack.config.js的plugins配置项中添加：

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

• 方式B：使用expose-loader
  在webpack.config.js的module.rules中添加：

module.exports = {
  // 其他原有配置
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery']
        }
      }
    ]
  }
}

配置完成后重启项目即可正常调用jQuery的modal方法。

方案3：Bootstrap 5原生调用（无需jQuery） #

如果你使用的是Bootstrap 5，它默认已不依赖jQuery，可直接用原生API操作模态框，更适配React项目：

// 关闭模态框代码
const modalEl = document.getElementById('exampleModal');
const modal = bootstrap.Modal.getInstance(modalEl);
modal.hide();

额外优化建议 #

React项目更推荐使用官方适配的react-bootstrap库，完全遵循React声明式开发规范，无需手动操作DOM、也不需要引入jQuery，可避免这类jQuery和DOM操作相关的兼容性问题。

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