Angular安装@popperjs/core启动报detectOverflow导出缺失错误如何修复

在Angular项目中按顺序执行以下操作：

• 执行npm i @ng-bootstrap/ng-bootstrap --legacy-peer-deps安装ng-bootstrap依赖
• 执行npm install @popperjs/core --save安装@popperjs/core依赖

启动Angular开发服务时，控制台抛出编译错误：

./node_modules/@popperjs/core/lib/index.js:4:0-102 - Error: export 'detectOverflow' (reexported as 'detectOverflow') was not found in './createPopper.js' (possible exports: createPopper, popperGenerator)

./node_modules/@popperjs/core/lib/popper-lite.js:11:0-75 - Error: export 'detectOverflow' (reexported as 'detectOverflow') was not found in './createPopper.js' (possible exports: createPopper, popperGenerator)

./node_modules/@popperjs/core/lib/popper.js:16:0-75 - Error: export 'detectOverflow' (reexported as 'detectOverflow') was not found in './createPopper.js' (possible exports: createPopper, popperGenerator)

• 安装ng-bootstrap时添加了--legacy-peer-deps参数，跳过了npm的peer依赖版本校验，没有自动安装与当前ng-bootstrap版本匹配的@popperjs/core依赖
• 手动安装@popperjs/core时拉取到了存在打包bug的版本（2.11.7、2.11.8），这两个版本的产物中detectOverflow方法未在createPopper.js中正确导出，直接触发编译报错

方案1：快速替换为兼容稳定版本 #

直接执行以下命令替换现有存在问题的popper依赖：

# 卸载现有不兼容版本
npm uninstall @popperjs/core
# 安装无打包问题、与ng-bootstrap兼容的稳定版本
npm install @popperjs/core@2.11.6 --save

执行完成后重新启动Angular开发服务即可恢复正常。

方案2：全局锁版本避免后续复现 #

如果需要团队协作、保证后续依赖安装不会再拉取到问题版本，可以通过锁版本的方式修复：

• 删除项目根目录下的node_modules文件夹，以及对应包管理器的锁文件：npm对应package-lock.json、yarn对应yarn.lock、pnpm对应pnpm-lock.yaml
• 在项目package.json中添加overrides配置，强制全项目使用兼容版本的@popperjs/core：

{
  "overrides": {
    "@popperjs/core": "2.11.6"
  }
}

• 执行npm install重新安装全量依赖，安装完成后启动服务即可。

非必要场景不要随意使用--legacy-peer-deps参数安装依赖，该参数会强制跳过peer依赖版本兼容性校验，极易出现依赖版本不匹配导致的编译、运行时异常。

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