GitHub Actions stuck on yarn build step for React app continous integration

Question

I am trying to create a simple continous integration workflow for my React app in which for every new pull request to master branch I run the unit tests and create build. I have deployed the yaml configuration file for GitHub Actions to my repository. When I create a pull request, it starts the checks for the pull request, but it gets stuck on the build step. I am using webpack to build my React app.

integrate.yml

name: Continous Integration

on:
  pull_request:
    branches: [master]

jobs:
  test_pull_request:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v2
          with:
            node-version: '12'

      - name: Cache Dependencies
        uses: actions/cache@v2
          with:
            path: '**/node_modules'
            key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
  
      - name: Install Dependencies
        run: yarn install

      - name: Run Unit Tests
        run: yarn test

      - name: Build Project
        run: yarn build:prod

npm scripts

"scripts": {
    "start": "webpack-dev-server --env development --open --color --progress",
    "build:prod": "webpack --env production --color --progress",
    "build:dev": "webpack --env development --color --progress",
    "test": "jest",
    "test:watch": "jest --watch",
    "precommit": "lint-staged"
},

I am assuming that webpack does not stop after it builds the project, and is running in watch mode due to which it is stuck, but I am not sure about this.

Answer 1

The issue here was when building project using the webpack command, after the build is complete, it does not returns the control and keeps on running. Therefore it gets stuck on the Build Project step in the yaml file and does not go the next step in Github Actions. The solution is to add a compiler hook in the webpack config to exit after the build is complete. This is how I added it in my config and it is working fine now.

plugins: [
  // Added this to plugins in webpack config
  {
     apply: (compiler) => {
       compiler.hooks.done.tap('DonePlugin', (stats) => {
         console.log('Compile is done !');
         setTimeout(() => {
           process.exit(0);
         });
       });
     }
  }
]