尝试使用 Github Actions 工作流将 React App 部署到 Azure，但在 TypeScript 中出现错误

Posted 2023-03-28

【中文标题】尝试使用 Github Actions 工作流将 React App 部署到 Azure，但在 TypeScript 中出现错误

【英文标题】：Trying to deploy React App to Azure using a Github Actions workflow but getting an error in TypeScript

【发布时间】：2021-11-09 00:57:33

【问题描述】：

我已经梳理了几天，现在尝试了各种事情，但无法让它发挥作用。我通常是一个 .Net 开发人员，我继承了这一点，所以我有点脱离了我的驾驶室。

我已按照本教程进行操作：https://websitebeaver.com/deploy-create-react-app-to-azure-app-services

它在我的笔记本电脑上构建并加载到 Chrome 中，执行 npm start 但运行我的工作流程我在 npm 安装、构建和测试步骤中收到以下错误：

TypeScript error in /home/runner/work/node_modules/@types/invariant/index.d.ts(16,68):
';' expected.  TS1005

    14 |     interface InvariantStatic 
    15 |         (testValue: false, format: string, ...extra: any[]): never;
  > 16 |         (testValue: any, format: string, ...extra: any[]): asserts testValue;
       |                                                                    ^
    17 |     
    18 | 
    19 | 

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-portal@1.0.0 build: `react-scripts build --prod`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-portal@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我的 YAML 文件用于此：

on:
  push:
    types: [created]
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: Portal-Test # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: "build" # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: "10.x" # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 14
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: npm install, build, and test
        run: |
          # Build and test the project, then
          # deploy to Azure Web App.
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: "Deploy to Azure WebApp"
        uses: azure/webapps-deploy@v2
        with:
          app-name: $ env.AZURE_WEBAPP_NAME 
          publish-profile: $ secrets.AZURE_WEBAPP_PUBLISH_PROFILE 
          package: $ env.AZURE_WEBAPP_PACKAGE_PATH 

还有我的 package.json

  "name": "Portal-Test",
  "version": "1.0.0",
  "private": true,
  "dependencies": 
    "@capacitor/android": "^1.4.0",
    "@capacitor/core": "1.3.0",
    "@ionic-native/core": "^5.23.0",
    "@ionic-native/in-app-browser": "^5.23.0",
    "@ionic/react": "^4.11.0",
    "@ionic/react-router": "^4.11.0",
    "@nivo/pie": "^0.61.1",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.12",
    "@types/react": "^16.9.5",
    "@types/react-dom": "^16.9.1",
    "@types/react-router": "^5.1.1",
    "@types/react-router-dom": "^5.1.0",
    "chart.js": "^2.9.3",
    "connected-react-router": "^6.8.0",
    "cordova-plugin-inappbrowser": "^3.2.0",
    "http-proxy-middleware": "^1.0.4",
    "ionicons": "^4.6.3",
    "node-sass": "^4.14.0",
    "react": "^16.10.2",
    "react-bootstrap": "latest",
    "react-chartjs-2": "^2.8.0",
    "react-dom": "^16.10.2",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.0",
    "react-router-dom": "^5.1.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "^3.4.0",
    "react-spinners": "^0.8.3",
    "react-toastify": "^6.0.4",
    "react-toastify-redux": "^1.0.0-rc.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.1.3",
    "redux-saga-router": "^2.2.0",
    "tslint": "^5.20.1",
    "typesafe-actions": "^5.1.0",
    "typescript": "3.6.3"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build --prod",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "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": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src"
  ,
  "include": ["src"],
  "exclude": ["node_modules", "lib"]
  ]

【问题讨论】：

你的项目中有 tsconfig 文件吗？

是的，我已将其添加到我的问题中。

【参考方案1】：

添加到您的 tsconfig

"compilerOptions": 
 "types": [],
 "skipLibCheck": true
,
"exclude": ["node_modules", "lib"]

【讨论】：

请简要描述您的答案如何解决问题。谢谢！

谢谢！！非常感谢所有帮助。这正是我所需要的。