Azure DevOps React Container Production Build JavaScript heap out of memory error

Question

I am trying to build react prod docker container with Azure DevOps pipelines. After I upgrade my build environment and code, Pipeline failed. After some research I add "--node-flags --max-old-space-size=8192" statement my build command. But it didn't matter. I also try tried relevant node containers for a build, it didn't work.

> [email protected] build /app
> react-scripts build

Creating an optimized production build...

    <--- Last few GCs --->
    
        
        [27:0x7f9033ec22b0]   518219 ms: Scavenge 1985.4 (2066.8) -> 1969.9 (2066.8) MB, 3.7 / 0.0 ms  (average mu = 0.190, current mu = 0.078) allocation failure 
        [27:0x7f9033ec22b0]   518272 ms: Scavenge 1985.8 (2067.0) -> 1970.4 (2067.0) MB, 5.7 / 0.0 ms  (average mu = 0.190, current mu = 0.078) allocation failure 
        [27:0x7f9033ec22b0]   520448 ms: Mark-sweep 1986.2 (2067.3) -> 1963.8 (2067.3) MB, 2137.2 / 0.0 ms  (average mu = 0.257, current mu = 0.320) allocation failure scavenge might not succeed
        
        
        <--- JS stacktrace --->
        
        FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! [email protected] build: `react-scripts build`
        npm ERR! Exit status 1
        npm ERR! 
        npm ERR! Failed at the [email protected] build script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
        
        npm ERR! A complete log of this run can be found in:
        npm ERR!     /root/.npm/_logs/2021-06-13T21_04_02_873Z-debug.log
        The command '/bin/sh -c npm run-script build --node-flags --max-old-space-size=8192' returned a non-zero code: 1
        ##[error]The command '/bin/sh -c npm run-script build --node-flags --max-old-space-size=8192' returned a non-zero code: 1
        ##[error]The process '/usr/bin/docker' failed with exit code 1
        Finishing: Docker

Dockerfile:

# stage1 - build react app first 
FROM node:14.16.1-alpine3.13 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make py3-pip git
RUN npm install --quiet node-gyp -g
RUN npm install
COPY . /app
RUN npm run-script build --node-flags --max-old-space-size=8192

My package.json file:

{
    "name": "demo1",
    "version": "7.0.6",
    "private": true,
    "homepage": "",
    "scripts": {
        "start": "react-scripts start -o",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "lint": "eslint src",
        "format": "prettier --write \"src/**/*.{js,css,scss,html}\"",
        "rtl": "webpack"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all",
            "ie 11"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version",
            "last 1 edge version",
            "IE 11"
        ]
    },
    "dependencies": {
        "@ant-design/charts": "^1.1.1",
        "@ant-design/icons": "^4.6.2",
        "@babel/standalone": "^7.14.4",
        "@date-io/date-fns": "2.6.1",
        "@emotion/react": "^11.4.0",
        "@formatjs/intl-pluralrules": "1.3.5",
        "@fortawesome/fontawesome-free": "5.13.0",
        "@manaflair/redux-batch": "1.0.0",
        "@material-ui/core": "4.9.14",
        "@material-ui/icons": "4.9.1",
        "@material-ui/lab": "4.0.0-alpha.53",
        "@material-ui/pickers": "3.2.10",
        "@material-ui/styles": "4.9.14",
        "@phuocng/react-pdf-viewer": "^1.7.0",
        "@react-google-maps/api": "^2.2.0",
        "@reduxjs/toolkit": "1.3.6",
        "@tanem/svg-injector": "8.0.50",
        "antd": "^4.13.0",
        "antd-mask-input": "^0.1.15",
        "apexcharts": "3.19.2",
        "axios": "0.19.2",
        "axios-mock-adapter": "1.18.1",
        "bootstrap": "4.5.0",
        "bulma": "^0.9.2",
        "bulma-helpers": "^0.4.0",
        "chart.js": "^3.3.2",
        "classnames": "^2.3.1",
        "clipboard-copy": "3.1.0",
        "clsx": "1.1.0",
        "convert-units": "^2.3.4",
        "cp-cli": "2.0.0",
        "css-mediaquery": "0.1.2",
        "date-fns": "2.8.1",
        "dentist": "^1.0.3",
        "dom-to-image": "^2.6.0",
        "downshift": "3.4.2",
        "email-validator": "^2.0.4",
        "fg-loadcss": "2.1.0",
        "formik": "2.1.4",
        "frappe-gantt-react": "^0.2.2",
        "fs": "*",
        "html-react-parser": "^1.2.5",
        "html2canvas": "*",
        "inputmask-core": "^2.2.0",
        "jquery": "^3.6.0",
        "json2mq": "0.2.0",
        "jspdf": "^2.3.1",
        "jspdf-autotable": "^3.5.14",
        "jss-rtl": "^0.3.0",
        "lodash": "4.17.15",
        "material-ui-popup-state": "1.4.1",
        "node-sass": "^4.0.0",
        "object-path": "0.11.4",
        "pdfjs-dist": "^2.7.570",
        "perfect-scrollbar": "1.5.0",
        "primeicons": "^4.1.0",
        "primereact": "^6.2.1",
        "prop-types": "15.7.2",
        "qrcode.react": "^1.0.1",
        "quill": "^1.3.7",
        "rc-year-calendar": "^1.0.2",
        "react": "16.12.0",
        "react-bootstrap": "1.0.1",
        "react-bootstrap-table-next": "4.0.2",
        "react-bootstrap-table2-editor": "^1.4.0",
        "react-bootstrap-table2-filter": "^1.3.3",
        "react-bootstrap-table2-paginator": "2.1.2",
        "react-bootstrap-table2-toolkit": "^2.1.3",
        "react-color": "^2.19.3",
        "react-contexify": "^4.1.1",
        "react-country-region-selector": "^3.1.0",
        "react-data-table-component": "^6.11.7",
        "react-date-picker": "^8.2.0",
        "react-datepicker": "2.16.0",
        "react-dom": "16.12.0",
        "react-draggable": "4.4.2",
        "react-export-excel": "^0.5.3",
        "react-google-maps": "^9.4.5",
        "react-helmet": "^6.1.0",
        "react-highlight": "^0.14.0",
        "react-highlight-words": "^0.17.0",
        "react-horizontal-timeline": "^1.5.3",
        "react-inlinesvg": "1.2.0",
        "react-intl": "3.6.2",
        "react-is": "16.13.1",
        "react-jvectormap": "0.0.16",
        "react-loader-spinner": "^4.0.0",
        "react-moment": "^1.1.1",
        "react-pdf": "^5.3.0",
        "react-pdfjs-multi": "^0.5.1",
        "react-perfect-scrollbar": "1.5.8",
        "react-phone-input-2": "^2.14.0",
        "react-portal": "4.2.0",
        "react-qr-reader": "^2.2.1",
        "react-qr-scanner": "*",
        "react-redux": "7.1.3",
        "react-router-dom": "5.1.2",
        "react-router-last-location": "^2.0.1",
        "react-scripts": "3.2.0",
        "react-select": "3.1.0",
        "react-share": "^4.4.0",
        "react-swipeable-views": "0.13.9",
        "react-syntax-highlighter": "12.2.1",
        "react-to-print": "^2.12.6",
        "react-toggle": "^4.1.2",
        "react-transition-group": "^4.4.2",
        "react-window": "1.8.5",
        "reactjs-pdf-reader": "^1.0.12",
        "reactstrap": "^8.9.0",
        "redux": "4.0.5",
        "redux-devtools-extension": "^2.13.9",
        "redux-logger": "^3.0.6",
        "redux-persist": "6.0.0",
        "redux-promise-middleware": "^6.1.2",
        "redux-saga": "1.1.3",
        "redux-thunk": "^2.3.0",
        "rsuite": "^4.10.2",
        "socicon": "3.0.5",
        "sockjs-client": "^1.4.0",
        "stompjs": "^2.3.3",
        "styled-components": "^5.3.0",
        "xlsx": "0.13.4",
        "yup": "0.29.0"
    },
    "devDependencies": {
        "@babel/plugin-transform-react-jsx": "^7.14.3",
        "copyfiles": "2.1.1",
        "node-sass": "4.14.0",
        "prettier": "1.19.1",
        "serve": "11.2.0",
        "webpack-cli": "3.3.11",
        "webpack-messages": "2.0.4",
        "webpack-rtl-plugin": "2.0.0"
    }
}

Thank you for help!

Is it the same on your local machine? How do you run docker? — Krzysztof Madej
– Krzysztof Madej, Commented Jun 18, 2021 at 6:38
Hi, local machine and server build env were different. I made the same env for local and server but that wasn't the point. I described the issue in the next coming comment. — Ömer
– Ömer, Commented Jul 4, 2021 at 12:15

Ömer · Accepted Answer · 2021-07-04 12:19:36Z

4

I was aware that the "--max-old-space-size=8192" parameter does not pass to build. So I dedided to add ENV in Dockerfile like " ENV NODE_OPTIONS="--max-old-space-size=8192"". Finally my Dockerfile transformed to:

# stage1 - build react app first 
FROM node:14.16.1-alpine3.13 as build
WORKDIR /app
ENV NODE_OPTIONS="--max-old-space-size=8192"
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
RUN apk --no-cache add g++ gcc libgcc libstdc++ linux-headers make py3-pip git
RUN npm install --quiet node-gyp -g
RUN npm install
COPY . /app
RUN npm run-script build

And then problem was solved. Thanks.

answered Jul 4, 2021 at 12:19

Ömer

631 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

taipignas · Accepted Answer · 2022-02-22 10:49:32Z

0

In the end the only thing that helped me was deleting "node-modules" folder, "package-lock.json" file and running npm install. Then I committed newly generated "package-lock.json" to git and Azure pipelines passed successfully.

I also removed eslint from devDependencies, because it is automatically a dependency to react-scripts, but I think it was not necessary.

I had this error with React project and Azure pipelines. Locally everything worked fine.

answered Feb 22, 2022 at 10:49

taipignas

1511 silver badge8 bronze badges

Collectives™ on Stack Overflow

Azure DevOps React Container Production Build JavaScript heap out of memory error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related