GitHub Actions中出现SyntaxError: Cannot use import statement outside a module错误

1. 修复GitHub Actions工作流的构建逻辑 #

你的工作流中npm install, build, and test步骤仅执行了npm install，缺少构建React项目的核心命令npm run build，这会导致build/目录为空或不存在，直接影响后续部署。修改该步骤：

- name: npm install, build, and test
  run: |
    npm install
    npm run build

2. 解决ES模块语法错误 #

方案一：声明项目模块类型 #

在项目根目录的package.json中添加"type": "module"，告知Node.js当前项目采用ES模块规范：

{
  "name": "your-react-app",
  "type": "module",
  // 其他原有配置项...
}

方案二：确认Azure静态文件托管配置 #

如果你的React项目是静态站点（绝大多数React项目均为此类型），Azure Web App应直接部署build/目录下的静态文件，无需Node.js运行时处理import语法。可通过Azure门户调整配置：

• 进入目标Web App → 配置 → 常规设置 → 启动命令，设置为npx serve -s build（使用serve托管静态文件），或确认静态文件托管规则已正确配置。

3. 补全部署步骤的package参数 #

你的deploy步骤中package参数为空，需指定部署文件路径，修改为：

- name: 'Deploy to Azure Web App'
  id: deploy-to-webapp
  uses: azure/webapps-deploy@v2
  with:
    app-name: 'rectifycreditclient'
    slot-name: 'Production'
    publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_E194E92742C24133961AB59ECD48DA31 }}
    package: .

（由于已将构建产物下载至当前目录，.代表部署当前目录下所有文件）

完整修正后的工作流 #

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: build/
  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'rectifycreditclient'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_E194E92742C24133961AB59ECD48DA31 }}
          package: .

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