Vercel部署React项目时出现react-bootstrap/OffCanvas模块找不到错误

以下是针对该问题的排查和解决步骤：

• 检查react-bootstrap版本兼容性
  OffCanvas是react-bootstrap 2.0.0版本之后才新增的组件，若你的package.json中react-bootstrap版本低于2.0.0，Vercel构建时会因为安装旧版本而找不到该组件。

  1. 本地执行npm list react-bootstrap查看当前版本
  2. 在package.json中锁定react-bootstrap为2.0.0及以上版本，例如："react-bootstrap": "^2.9.0"
  3. 重新生成package-lock.json（删除原有文件后执行npm install），并将package.json和package-lock.json同步到GitHub仓库

• 确保依赖安装一致性
  本地执行npm ci（而非npm install），强制按照package-lock.json的依赖版本安装，之后运行npm run build验证本地是否能正常构建。如果本地ci后构建失败，说明依赖锁文件存在问题，重新生成后再提交。

• 核对组件导入路径
  确认你的组件中导入OffCanvas的语句没有拼写错误，正确的导入方式为：

  import { OffCanvas } from 'react-bootstrap';
  // 或者
  import OffCanvas from 'react-bootstrap/OffCanvas';
  

  注意大小写（OffCanvas的首字母O和C均为大写），避免因路径或拼写错误导致模块找不到。

• 配置Vercel构建环境

  1. 进入Vercel项目的「Settings」页面，确认构建命令为npm run build
  2. 在package.json中添加engines字段指定Node版本（与本地开发环境一致），例如：

     "engines": {
       "node": ">=16.x"
     }
     

  3. 触发重新构建时，选择「Clear build cache and deploy」，清除Vercel缓存的旧依赖，强制重新安装并构建。

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