react-popper报错：Module '"react-popper"' 无导出成员'usePopper' 跨项目异常

报错信息：Module '"react-popper"' has no exported member 'usePopper'
相关依赖版本：react-popper: "^2.2.5"
场景：自定义custom-ui-kit组件库内已修复该报错，但上层引用组件库的项目仍触发报错

1. 排查并统一多版本依赖冲突 #

这是最常见的触发原因，上层项目和组件库同时依赖了不同版本的react-popper，导致类型声明不匹配：

• 执行对应包管理工具的命令排查已安装的react-popper版本：

  # npm 环境
  npm ls react-popper
  # yarn 环境
  yarn list react-popper
  # pnpm 环境
  pnpm ls react-popper
  

• 如果输出存在多个不同版本的react-popper，在上层项目强制统一版本：
  • npm/yarn环境：在package.json中新增resolutions字段

    "resolutions": {
      "react-popper": "^2.2.5"
    }
    

  • pnpm环境：在项目根目录的.npmrc文件中新增配置

    public-hoist-pattern[]=react-popper
    

  配置完成后重新执行安装依赖命令。
• 补充：如果你的custom-ui-kit是需要对外发布的公共组件库，需将react-popper放在peerDependencies中声明版本范围，不要放在dependencies里，避免上层项目重复安装多份实例。

2. 校验TypeScript配置项 #

确认上层项目的tsconfig.json不存在以下错误配置：

• moduleResolution字段需设置为node或bundler，禁止使用classic模式
• exclude数组未包含node_modules/react-popper相关规则
• 未手动配置paths重定向react-popper的引入路径

3. 全量清理缓存重装依赖 #

如果上述配置修改后仍报错，执行以下操作清理缓存：

# 清理包管理工具缓存
npm cache clean --force
# yarn环境执行 yarn cache clean
# pnpm环境执行 pnpm store prune

# 删除本地依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml

# 重新安装依赖
npm install

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