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:
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!