title: Azure DevOps React Container Production Build JavaScript heap out of memory error
body: <p>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 &quot;--node-flags --max-old-space-size=8192&quot; statement my build command. But it didn't matter. I also try tried relevant node containers for a build, it didn't work.</p>
  <pre><code>&gt; demo1@7.0.6 build /app
  &gt; react-scripts build
  
  Creating an optimized production build...
  
      &lt;--- Last few GCs ---&gt;
      
          
          [27:0x7f9033ec22b0]   518219 ms: Scavenge 1985.4 (2066.8) -&gt; 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) -&gt; 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) -&gt; 1963.8 (2067.3) MB, 2137.2 / 0.0 ms  (average mu = 0.257, current mu = 0.320) allocation failure scavenge might not succeed
          
          
          &lt;--- JS stacktrace ---&gt;
          
          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
  </code></pre>
  <p>Dockerfile:</p>
  <pre><code># 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
  </code></pre>
  <p>My package.json file:</p>
  <pre><code>{
      &quot;name&quot;: &quot;demo1&quot;,
      &quot;version&quot;: &quot;7.0.6&quot;,
      &quot;private&quot;: true,
      &quot;homepage&quot;: &quot;&quot;,
      &quot;scripts&quot;: {
          &quot;start&quot;: &quot;react-scripts start -o&quot;,
          &quot;build&quot;: &quot;react-scripts build&quot;,
          &quot;test&quot;: &quot;react-scripts test&quot;,
          &quot;eject&quot;: &quot;react-scripts eject&quot;,
          &quot;lint&quot;: &quot;eslint src&quot;,
          &quot;format&quot;: &quot;prettier --write \&quot;src/**/*.{js,css,scss,html}\&quot;&quot;,
          &quot;rtl&quot;: &quot;webpack&quot;
      },
      &quot;eslintConfig&quot;: {
          &quot;extends&quot;: &quot;react-app&quot;
      },
      &quot;browserslist&quot;: {
          &quot;production&quot;: [
              &quot;&gt;0.2%&quot;,
              &quot;not dead&quot;,
              &quot;not op_mini all&quot;,
              &quot;ie 11&quot;
          ],
          &quot;development&quot;: [
              &quot;last 1 chrome version&quot;,
              &quot;last 1 firefox version&quot;,
              &quot;last 1 safari version&quot;,
              &quot;last 1 edge version&quot;,
              &quot;IE 11&quot;
          ]
      },
      &quot;dependencies&quot;: {
          &quot;@ant-design/charts&quot;: &quot;^1.1.1&quot;,
          &quot;@ant-design/icons&quot;: &quot;^4.6.2&quot;,
          &quot;@babel/standalone&quot;: &quot;^7.14.4&quot;,
          &quot;@date-io/date-fns&quot;: &quot;2.6.1&quot;,
          &quot;@emotion/react&quot;: &quot;^11.4.0&quot;,
          &quot;@formatjs/intl-pluralrules&quot;: &quot;1.3.5&quot;,
          &quot;@fortawesome/fontawesome-free&quot;: &quot;5.13.0&quot;,
          &quot;@manaflair/redux-batch&quot;: &quot;1.0.0&quot;,
          &quot;@material-ui/core&quot;: &quot;4.9.14&quot;,
          &quot;@material-ui/icons&quot;: &quot;4.9.1&quot;,
          &quot;@material-ui/lab&quot;: &quot;4.0.0-alpha.53&quot;,
          &quot;@material-ui/pickers&quot;: &quot;3.2.10&quot;,
          &quot;@material-ui/styles&quot;: &quot;4.9.14&quot;,
          &quot;@phuocng/react-pdf-viewer&quot;: &quot;^1.7.0&quot;,
          &quot;@react-google-maps/api&quot;: &quot;^2.2.0&quot;,
          &quot;@reduxjs/toolkit&quot;: &quot;1.3.6&quot;,
          &quot;@tanem/svg-injector&quot;: &quot;8.0.50&quot;,
          &quot;antd&quot;: &quot;^4.13.0&quot;,
          &quot;antd-mask-input&quot;: &quot;^0.1.15&quot;,
          &quot;apexcharts&quot;: &quot;3.19.2&quot;,
          &quot;axios&quot;: &quot;0.19.2&quot;,
          &quot;axios-mock-adapter&quot;: &quot;1.18.1&quot;,
          &quot;bootstrap&quot;: &quot;4.5.0&quot;,
          &quot;bulma&quot;: &quot;^0.9.2&quot;,
          &quot;bulma-helpers&quot;: &quot;^0.4.0&quot;,
          &quot;chart.js&quot;: &quot;^3.3.2&quot;,
          &quot;classnames&quot;: &quot;^2.3.1&quot;,
          &quot;clipboard-copy&quot;: &quot;3.1.0&quot;,
          &quot;clsx&quot;: &quot;1.1.0&quot;,
          &quot;convert-units&quot;: &quot;^2.3.4&quot;,
          &quot;cp-cli&quot;: &quot;2.0.0&quot;,
          &quot;css-mediaquery&quot;: &quot;0.1.2&quot;,
          &quot;date-fns&quot;: &quot;2.8.1&quot;,
          &quot;dentist&quot;: &quot;^1.0.3&quot;,
          &quot;dom-to-image&quot;: &quot;^2.6.0&quot;,
          &quot;downshift&quot;: &quot;3.4.2&quot;,
          &quot;email-validator&quot;: &quot;^2.0.4&quot;,
          &quot;fg-loadcss&quot;: &quot;2.1.0&quot;,
          &quot;formik&quot;: &quot;2.1.4&quot;,
          &quot;frappe-gantt-react&quot;: &quot;^0.2.2&quot;,
          &quot;fs&quot;: &quot;*&quot;,
          &quot;html-react-parser&quot;: &quot;^1.2.5&quot;,
          &quot;html2canvas&quot;: &quot;*&quot;,
          &quot;inputmask-core&quot;: &quot;^2.2.0&quot;,
          &quot;jquery&quot;: &quot;^3.6.0&quot;,
          &quot;json2mq&quot;: &quot;0.2.0&quot;,
          &quot;jspdf&quot;: &quot;^2.3.1&quot;,
          &quot;jspdf-autotable&quot;: &quot;^3.5.14&quot;,
          &quot;jss-rtl&quot;: &quot;^0.3.0&quot;,
          &quot;lodash&quot;: &quot;4.17.15&quot;,
          &quot;material-ui-popup-state&quot;: &quot;1.4.1&quot;,
          &quot;node-sass&quot;: &quot;^4.0.0&quot;,
          &quot;object-path&quot;: &quot;0.11.4&quot;,
          &quot;pdfjs-dist&quot;: &quot;^2.7.570&quot;,
          &quot;perfect-scrollbar&quot;: &quot;1.5.0&quot;,
          &quot;primeicons&quot;: &quot;^4.1.0&quot;,
          &quot;primereact&quot;: &quot;^6.2.1&quot;,
          &quot;prop-types&quot;: &quot;15.7.2&quot;,
          &quot;qrcode.react&quot;: &quot;^1.0.1&quot;,
          &quot;quill&quot;: &quot;^1.3.7&quot;,
          &quot;rc-year-calendar&quot;: &quot;^1.0.2&quot;,
          &quot;react&quot;: &quot;16.12.0&quot;,
          &quot;react-bootstrap&quot;: &quot;1.0.1&quot;,
          &quot;react-bootstrap-table-next&quot;: &quot;4.0.2&quot;,
          &quot;react-bootstrap-table2-editor&quot;: &quot;^1.4.0&quot;,
          &quot;react-bootstrap-table2-filter&quot;: &quot;^1.3.3&quot;,
          &quot;react-bootstrap-table2-paginator&quot;: &quot;2.1.2&quot;,
          &quot;react-bootstrap-table2-toolkit&quot;: &quot;^2.1.3&quot;,
          &quot;react-color&quot;: &quot;^2.19.3&quot;,
          &quot;react-contexify&quot;: &quot;^4.1.1&quot;,
          &quot;react-country-region-selector&quot;: &quot;^3.1.0&quot;,
          &quot;react-data-table-component&quot;: &quot;^6.11.7&quot;,
          &quot;react-date-picker&quot;: &quot;^8.2.0&quot;,
          &quot;react-datepicker&quot;: &quot;2.16.0&quot;,
          &quot;react-dom&quot;: &quot;16.12.0&quot;,
          &quot;react-draggable&quot;: &quot;4.4.2&quot;,
          &quot;react-export-excel&quot;: &quot;^0.5.3&quot;,
          &quot;react-google-maps&quot;: &quot;^9.4.5&quot;,
          &quot;react-helmet&quot;: &quot;^6.1.0&quot;,
          &quot;react-highlight&quot;: &quot;^0.14.0&quot;,
          &quot;react-highlight-words&quot;: &quot;^0.17.0&quot;,
          &quot;react-horizontal-timeline&quot;: &quot;^1.5.3&quot;,
          &quot;react-inlinesvg&quot;: &quot;1.2.0&quot;,
          &quot;react-intl&quot;: &quot;3.6.2&quot;,
          &quot;react-is&quot;: &quot;16.13.1&quot;,
          &quot;react-jvectormap&quot;: &quot;0.0.16&quot;,
          &quot;react-loader-spinner&quot;: &quot;^4.0.0&quot;,
          &quot;react-moment&quot;: &quot;^1.1.1&quot;,
          &quot;react-pdf&quot;: &quot;^5.3.0&quot;,
          &quot;react-pdfjs-multi&quot;: &quot;^0.5.1&quot;,
          &quot;react-perfect-scrollbar&quot;: &quot;1.5.8&quot;,
          &quot;react-phone-input-2&quot;: &quot;^2.14.0&quot;,
          &quot;react-portal&quot;: &quot;4.2.0&quot;,
          &quot;react-qr-reader&quot;: &quot;^2.2.1&quot;,
          &quot;react-qr-scanner&quot;: &quot;*&quot;,
          &quot;react-redux&quot;: &quot;7.1.3&quot;,
          &quot;react-router-dom&quot;: &quot;5.1.2&quot;,
          &quot;react-router-last-location&quot;: &quot;^2.0.1&quot;,
          &quot;react-scripts&quot;: &quot;3.2.0&quot;,
          &quot;react-select&quot;: &quot;3.1.0&quot;,
          &quot;react-share&quot;: &quot;^4.4.0&quot;,
          &quot;react-swipeable-views&quot;: &quot;0.13.9&quot;,
          &quot;react-syntax-highlighter&quot;: &quot;12.2.1&quot;,
          &quot;react-to-print&quot;: &quot;^2.12.6&quot;,
          &quot;react-toggle&quot;: &quot;^4.1.2&quot;,
          &quot;react-transition-group&quot;: &quot;^4.4.2&quot;,
          &quot;react-window&quot;: &quot;1.8.5&quot;,
          &quot;reactjs-pdf-reader&quot;: &quot;^1.0.12&quot;,
          &quot;reactstrap&quot;: &quot;^8.9.0&quot;,
          &quot;redux&quot;: &quot;4.0.5&quot;,
          &quot;redux-devtools-extension&quot;: &quot;^2.13.9&quot;,
          &quot;redux-logger&quot;: &quot;^3.0.6&quot;,
          &quot;redux-persist&quot;: &quot;6.0.0&quot;,
          &quot;redux-promise-middleware&quot;: &quot;^6.1.2&quot;,
          &quot;redux-saga&quot;: &quot;1.1.3&quot;,
          &quot;redux-thunk&quot;: &quot;^2.3.0&quot;,
          &quot;rsuite&quot;: &quot;^4.10.2&quot;,
          &quot;socicon&quot;: &quot;3.0.5&quot;,
          &quot;sockjs-client&quot;: &quot;^1.4.0&quot;,
          &quot;stompjs&quot;: &quot;^2.3.3&quot;,
          &quot;styled-components&quot;: &quot;^5.3.0&quot;,
          &quot;xlsx&quot;: &quot;0.13.4&quot;,
          &quot;yup&quot;: &quot;0.29.0&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@babel/plugin-transform-react-jsx&quot;: &quot;^7.14.3&quot;,
          &quot;copyfiles&quot;: &quot;2.1.1&quot;,
          &quot;node-sass&quot;: &quot;4.14.0&quot;,
          &quot;prettier&quot;: &quot;1.19.1&quot;,
          &quot;serve&quot;: &quot;11.2.0&quot;,
          &quot;webpack-cli&quot;: &quot;3.3.11&quot;,
          &quot;webpack-messages&quot;: &quot;2.0.4&quot;,
          &quot;webpack-rtl-plugin&quot;: &quot;2.0.0&quot;
      }
  }
  </code></pre>
  <p>Thank you for help!</p>