Home > Mobile >  Trying to deploy React App to Azure using a Github Actions workflow but getting an error in TypeScri
Trying to deploy React App to Azure using a Github Actions workflow but getting an error in TypeScri

Time:09-17

I've been combing SO for a couple days now trying various things and just cannot get this to work. I'm normally a .Net developer and I inherited this so I'm kind of out of my wheelhouse here.

I followed this tutorial to get as far as I have: https://websitebeaver.com/deploy-create-react-app-to-azure-app-services

It builds and loads into Chrome on my laptop doing a npm start but running my workflow I receive the following error in the npm install, build, and test step:

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.

My YAML file used for this:

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 }}

And my 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"
    ]
  }
}

the 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"]
  ]
}

CodePudding user response:

add to your tsconfig

"compilerOptions": {
 "types": [],
 "skipLibCheck": true
},
"exclude": ["node_modules", "lib"]
  • Related