GitHub Actions部署Firebase时React模块缺失的CI/CD报错求助

问题详情 #

通过GitHub Actions自动CI/CD部署React项目到Firebase时，执行npm ci && npm run build步骤报错，清理安装完成但构建卡住，具体错误信息：

Module not found: Error: Can't resolve './app/routes/AppRoutes' in '/home/runner/work/forms-react-nestjs/forms-react-nestjs/forms/src'

• 本地构建并手动部署到Firebase Hosting完全正常
• 怀疑问题和工作目录切换到./forms有关
• AppRoutes实际为AppRoutes.tsx文件，导出了react-router-dom的createRouter

配置文件 #

package.json #

{
  "name": "forms",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^2.1.0",
    "@chakra-ui/react": "^2.8.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^28.1.8",
    "@types/node": "^12.20.55",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "env-cmd": "^10.1.0",
    "formik": "^2.4.3",
    "framer-motion": "^6.5.1",
    "immer": "^10.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^3.11.0",
    "react-player": "^2.12.0",
    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "yup": "^1.2.0",
    "zustand": "^4.4.1"
  },
  "scripts": {
    "start": "env-cmd -f .env.development react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build",
    "test": "env-cmd react-scripts test"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

解决方案 #

1. 验证工作目录切换正确性 #

在GitHub Actions工作流中，切换到./forms目录后，先打印当前路径确认是否在正确位置，避免后续命令跑错目录：

- name: Check current directory
  run: pwd
  working-directory: ./forms

确保npm ci和npm run build步骤都指定了working-directory: ./forms。

2. 修复文件名大小写问题 #

GitHub Actions的运行环境是Ubuntu（严格区分文件名大小写），而本地Windows/macOS默认不区分。检查你的导入语句：
如果导入写的是import AppRoutes from './app/routes/AppRoutes'，但实际文件是appRoutes.tsx（大小写不一致），本地能正常构建，但Linux环境会找不到文件。统一文件名和导入语句的大小写即可。

3. 配置TypeScript后缀解析 #

在tsconfig.json的compilerOptions中添加后缀解析配置，确保TypeScript能自动识别.tsx等后缀：

"compilerOptions": {
  // ...现有配置
  "resolveExtensions": [".ts", ".tsx", ".js", ".jsx"]
}

4. 检查.gitignore规则 #

确认.gitignore没有把src/app/routes/AppRoutes.tsx排除在外，导致该文件没有被推送到GitHub仓库，自然会在CI环境中找不到。

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