JavaScript heap out of memory with simple webpack build

Summary

Steps to reproduce

Example Project

What is the current bug behavior?

What is the expected correct behavior?

Relevant logs and/or screenshots

Output of checks

Results of GitLab environment info

Expand for output related to GitLab environment info

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

JavaScript heap out of memory with simple webpack build

I am running a pipeline which has a build stage as part of it which is failing due to running out of memory. The build process just runs a command to build a react app using webpack. Here is the pipeline config gitlab-ci:

I am running a pipeline which has a build stage as part of it which is failing due to running out of memory. The build process just runs a command to build a react app using webpack. Here is the pipeline config gitlab-ci:

gitlab-ci.yml

image: cypress/browsers:node14.7.0-chrome84


stages:
  - install
  - build
  - test

variables:
  npm_config_cache: '$CI_PROJECT_DIR/.npm'
  CYPRESS_CACHE_FOLDER: '$CI_PROJECT_DIR/cache/Cypress'

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .npm
    - cache/Cypress
    - node_modules

install:
  stage: install
  script:
    - npm install
  artifacts:
    name: 'artifacts'
    untracked: true
    expire_in: 30 mins
    paths:
      - node_modules/

build:
  stage: build
  script:
    - npm run build
  artifacts:
    paths:
      - dist
    expire_in: 30 mins
  dependencies:
    - install

test:
  stage: test
  dependencies:
    - build
  script:
    - npm run test:ci

I am using a cypress docker image (cypress/browsers:node14.7.0-chrome84) to run the pipeline. The install stage is the one that fails with the following message (also see attached):

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

I have tried running the command in the same docker container locally and it works without any issues whatsoever so I am led to thinking the issue likely comes from the Gitlab runner.

Here you can see my webpack config for the production build, nothing out of the ordinary:

webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
 entry: {
    main: ['babel-polyfill', './src/index.tsx'],
  },
  devtool: 'source-map',
  output: {
    filename: '[name].[fullhash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.js$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        use: [{ loader: 'babel-loader' }],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              outputPath: 'assets/img/',
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/fonts/',
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins:[
  new HtmlWebPackPlugin({
    template: 'index.html',
  }),
  new CleanWebpackPlugin({
    cleanAfterEveryBuildPatterns: ['dist'],
  }),
  new webpack.DefinePlugin({
    __REACT_DEVTOOLS_GLOBAL_HOOK__: '({ isDisabled: true })',
  }),
  ]
});

Here is the build command in the package.json along with the node version set in the engine that matches the docker images node version

package.json

{
  "engines": {
    "node": ">=14.7.0"
  },
  "scripts": {
    "build": "webpack --config webpack.prod.js",
  },
}

Possible fixes

I have tried setting the max_old_space_size node option as I have found recommended online but it does not change anything no matter what memory value I give it

"build": "export NODE_OPTIONS=--max_old_space_size=8192 && webpack --config webpack.prod.js",

Really not sure why this is happening!