npm run build is failing on CI but runs fine on local machine

[jpomykala]

Hey I got really weird problem. I use CRA with TypeScript template. I cannot build my app using npm run build on Github Actions but it works fine locally. It was also working fine before (few weeks ago). I tried to revert my commits but it's still not working like before. I've no idea what happen.

What I tried so far:

• change react-intl version
• change react-script version
• remove package.json lock & yarn.lock from git

Package.json deps

   "typescript": "^4.1.2",
    "react-intl": "^5.10.6",
    "react-dom": "^16.13.1",
    "react": "^16.13.1",
    "react-scripts": "^3.4.3",

    "build": "react-scripts build",

Error:

TypeScript error in /home/runner/work/xxxxxxxx/src/components/input/groups/PeriodFilter.tsx(17,14):
JSX element class does not support attributes because it does not have a 'props' property.  TS2607

<LabeledInput
 icon="fa fa-calendar"
 label={<FormattedMessage id="TIME_PERIOD" />}
        ^
>
<PeriodSelect
periodOptions={periodOptions}

Github Action:

name: Deploy

on:
  push:
    branches:
      - master

env:
  ACTIONS_ALLOW_UNSECURE_COMMANDS: true

jobs:
  deploy:

    runs-on: ubuntu-latest
    timeout-minutes: 15
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v2-beta
        with:
          node-version: '12'
          check-latest: true
      - run: rm -rf node_modules/
      - run: npm install --production
      - run: npm run build
        env:
          CI: ""
      - run: curl -s https://get.simplelocalize.io | bash
...

[SoundaryaA3098]

Can you check if this link works - https://stackoverflow.com/questions/63445967/githubs-action-is-not-building-react-application. It worked for me!

[jpomykala]

In my case, I fixed it by replacing npm install with npm ci

[nimit2801]

This works @SoundaryaA3098 👍
https://stackoverflow.com/questions/63445967/githubs-action-is-not-building-react-application
Thank :)

[jpomykala]

I fixed it by replacing npm install with npm ci

[ViniciusLima7]

Pra mim ainda continua com problema

[MykolaSeletskyi]

were you able to solve the problem?

[calvinlf]

Change rum to run

[huntzinger92]

What a buzzkill

[ViniciusLima7]

kkk true, I solved it, but I don't remember how anymore kkkk

[bilouStrike]

Facing the some issue: failing on CI but runs fine on local machine
Here is my workflow:

name: CI

on: push
jobs:
  lint-format:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [16.x]
    steps:
      - name: Checkout Commit
        uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}
      - name: Install deps
        run: |
          npm ci
      - name: Run lint
        run: |
          npm run lint
      - name: Run prettier
        run: |
          npm run format
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [16.x]
    steps:
      - name: Checkout Commit
        uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}
      - name: Install deps
        run: |
          npm ci
      - name: Run test
        run: |
          npm run test
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [16.x]
    needs: [lint-format, test]
    steps:
      - name: Checkout Commit
        uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}
      - name: remove node_modules
        run: rm -rf node_modules/
      - name: Install deps
        run: |
          npm ci
      - name: Run build
        run: |
          npm run build

my tsconfig:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["src/*"]
    },
    "baseUrl": "."
  },
  "include": ["src","src/**/*.ts", "tests/**/*.ts",".eslintrc.cjs", "vitest.config.ts"],
  "exclude": ["node_modules", ".vscode"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Error output:

[trevor-rex]

Did you solve this issue?

[bacaxnot]

Same :c

[ShadyAkhtar]

Did you find any solution?

[JohanRivera]

When you deploy your application using CI/CD, most servers contain by default the CI in true. It means that Neflify treating warnings as errors. Then, You must solve warnings in your project or execute the command CI=false npm run build