使用Bootstrap4.5.2下拉菜单与jQuery3.5.1时出现n is not a constructor错误

错误原因 #

你遇到的Uncaught TypeError: n is not a constructor错误，核心是版本不兼容：Bootstrap 4.5.2依赖的是Popper.js 1.x版本，但你引入的是Popper.js 2.9.3（该版本为Bootstrap 5设计），两者API不匹配，导致Bootstrap无法找到正确的Popper构造函数，触发报错。

解决方案 #

方案一：替换Popper.js为兼容版本 #

直接修改index.html中的Popper.js引入链接，换成Bootstrap 4.x支持的1.x版本（比如1.16.1）：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

替换后，Bootstrap 4.5.2就能正确调用Popper的构造函数，下拉按钮功能可恢复正常。

方案二：改用React Bootstrap（更推荐） #

React和jQuery的DOM操作逻辑天然冲突（React依赖虚拟DOM，jQuery直接操作真实DOM），长期来看，使用专门适配React的组件库更稳定：

1. 安装依赖：

npm install react-bootstrap bootstrap

2. 在项目入口文件（如src/index.js）引入Bootstrap CSS：

import 'bootstrap/dist/css/bootstrap.min.css';

3. 替换原有下拉按钮代码为React Bootstrap组件：

import { Dropdown, Button } from 'react-bootstrap';

// 组件内使用
<div className="btn-group float-right" role="group" aria-label="Button group">
  <Dropdown>
    <Dropdown.Toggle variant="success" id={`forwardDropdown-${issue.issueId}`}>
      Forward
    </Dropdown.Toggle>
    <Dropdown.Menu aria-labelledby={`forwardDropdown-${issue.issueId}`}>
      <Dropdown.Item href="#">Action</Dropdown.Item>
      <Dropdown.Item href="#">Another action</Dropdown.Item>
      <Dropdown.Item href="#">Something else here</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
  <Button variant="danger">Discard</Button>
</div>

这种方式完全摆脱了jQuery和原生Bootstrap JS的依赖，适配React生命周期，可避免后续出现更多DOM冲突问题。

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