部署GitHub Pages时出现react-p5模块找不到的错误求助

排查方向与解决方案 #

• 确认依赖声明位置
  检查package.json，确保react-p5在dependencies区块而非devDependencies中。GitHub Pages部署默认不会安装devDependencies内的包，若误放会导致模块缺失。可通过命令调整：

  npm install react-p5 --save
  

  也可手动修改package.json，将react-p5移至dependencies下。

• 清理工作流缓存
  GitHub Actions缓存可能留存旧依赖状态，导致新安装的包未被加载。可在仓库Actions页面重新运行工作流并选择“清除缓存”，或在工作流文件中添加缓存清理步骤。

• 检查工作流依赖安装步骤
  查看自定义工作流文件（通常在.github/workflows/目录下），确保包含完整的依赖安装命令：

  steps:
    - uses: actions/checkout@v4
    - name: Install dependencies
      run: npm install
  

  避免使用npm install --production这类会跳过必要包的命令。

• 同步本地与远程依赖锁文件
  删除本地node_modules和package-lock.json（或yarn.lock），重新安装依赖后提交锁文件：

  rm -rf node_modules package-lock.json
  npm install
  git add package-lock.json
  git commit -m "更新依赖锁文件"
  git push
  

  确保远程仓库锁文件与本地一致，避免工作流安装时出现版本不匹配或缺失。

• 验证导入路径大小写
  GitHub Actions运行在Linux环境，路径大小写敏感。确认代码中导入语句为import ReactP5 from 'react-p5'（包名全小写），无大小写错误。

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