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.
> demo1@7.0.6 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! demo1@7.0.6 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo1@7.0.6 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!
Advertisement
Answer
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.