导入Bootstrap JS到项目后Collapse组件无法工作问题求助

核心问题1：依赖版本不匹配 #

Bootstrap 5.x 不再使用旧版popper.js v1.x 作为依赖，要求使用的是@popperjs/core v2.x 版本，你当前安装的popper.js": "^1.16.1"不符合版本要求，这是组件无法正常运行的核心原因。

核心问题2：全局挂载配置缺失 #

如果你的代码中需要通过jQuery调用Bootstrap组件方法，需要将jQuery挂载到全局window对象，否则Bootstrap无法绑定到jQuery实例上。

解决步骤 #

步骤1：替换错误版本依赖 #

执行命令卸载旧版popper，安装符合要求的版本：

npm uninstall popper.js
npm install @popperjs/core@2

步骤2：修正主入口导入逻辑 #

修改主入口文件的导入代码，补充全局挂载：

import $ from "jquery";
// 将jQuery挂载到全局，供Bootstrap和业务代码调用
window.$ = window.jQuery = $;
import "@popperjs/core";
import 'bootstrap';

步骤3：动态DOM元素补充初始化（可选） #

如果你的Collapse组件DOM是页面加载后动态渲染生成的，需要手动初始化组件：

import { Collapse } from 'bootstrap'
// 初始化所有collapse元素
const collapseElements = document.querySelectorAll('.collapse')
;[...collapseElements].forEach(el => new Collapse(el))

可选webpack配置优化 #

如果不想手动挂载全局变量，可以在webpack.config.js中添加ProvidePlugin自动注入依赖：

const webpack = require('webpack');
module.exports = {
  // 保留你原有webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      Popper: ['@popperjs/core', 'default']
    })
  ]
}

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