0

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!

2
  • Is it the same on your local machine? How do you run docker? 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
    Jul 4, 2021 at 12:15

2 Answers 2

3

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.

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.