在GitHub Actions中构建React项目失败求助

构建过程中触发RollupError：无法从src/App.jsx解析"./pages/Product"。

你的GitHub Actions配置代码如下：

name: Publish Website to Web Hosting
on:
  push:
    branches:
      - main
jobs:
  web-deploy:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v2.1.0
        with:
          fetch-depth: 2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node-version }}

      - name: Build Project
        run: |
          npm install
          npm run build
        env:
          CI: false

      - name: List output files
        run: find build/ -print

      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build/

以下是针对性的解决步骤：

• 检查路径大小写：GitHub Actions使用的Ubuntu是大小写敏感系统，确认src/pages/下的文件名是Product.jsx（或对应后缀），且App.jsx中的导入路径与实际文件名大小写完全一致，比如不要写成./pages/product。
• 验证文件存在性：确认src/pages/Product相关文件已提交到main分支，没有被.gitignore规则排除。本地执行git ls-files src/pages可查看已追踪的文件，确保文件已推送到GitHub仓库。
• 修改拉取深度配置：当前actions/checkout的fetch-depth设为2，可能导致部分文件未被拉取。将其改为fetch-depth: 0以拉取完整仓库：

  - uses: actions/checkout@v2.1.0
    with:
      fetch-depth: 0
  

• 检查Rollup解析配置：如果项目自定义了Rollup配置，确认resolve.extensions中包含.jsx后缀，让Rollup能正确识别并解析该类型文件：

  export default {
    // 其他配置项
    resolve: {
      extensions: ['.js', '.jsx']
    }
  };
  

• 本地复现排查：在本地Linux/WSL环境执行npm run build，若能复现错误，说明问题出在项目本身的路径或配置；若本地正常，则重点排查GitHub Actions的文件拉取环节。

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