Heap out of memory error while building after updating to 3.3.0

[jdtriska]

Describe the bug

Hi all,

When updating our project from react-scripts 3.2.0 to 3.3.0, I encountered this error:

$ react-scripts build
Creating an optimized production build...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

<--- Last few GCs --->

[36:0x55e4757695a0]    34633 ms: Scavenge 1385.6 (1423.7) -> 1384.9 (1424.2) MB, 3.2 / 0.0 ms  (average mu = 0.093, current mu = 0.056) allocation failure 
[36:0x55e4757695a0]    34637 ms: Scavenge 1386.1 (1424.2) -> 1385.6 (1424.7) MB, 3.1 / 0.0 ms  (average mu = 0.093, current mu = 0.056) allocation failure 
[36:0x55e4757695a0]    34642 ms: Scavenge 1386.2 (1424.7) -> 1385.6 (1425.2) MB, 3.3 / 0.0 ms  (average mu = 0.093, current mu = 0.056) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x2061b015be1d]
Security context: 0x00a8b719e6e1 <JSObject>
    1: SourceMapConsumer_allGeneratedPositionsFor [0x18f3002779b9] [/soom-web-apps/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x2061b0dbafe5](this=0x2fb0c7702291 <BasicSourceMapConsumer map = 0x133f8c137839>,aArgs=0x3a559fc82221 <Object map = 0x133f8c132509>)
    2: /* anonymous */(aka /* anonymous */) [0x12fc24144c...

Aborted (core dumped)
error Command failed with exit code 134.

We're building this in a container based on node:10.14.1-alpine pretty much out of the box with yarn, running yarn build, which runs the default CRA command react-scripts build.

I have confirmed that switching only the react-scripts version between 3.2.0 and 3.3.0 solves and causes the issue respectively.

Our package.json is fairly simple for this application, and I've reproduced a somewhat anonymized copy below:

{
  "name": "APPLICATION",
  "version": "VERSION",
  "private": true,
  "dependencies": {
    "@formatjs/intl-pluralrules": "^1.3.9",
    "@material-ui/core": "^4.7.2",
    "@formatjs/intl-relativetimeformat": "^4.5.1",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/styles": "^4.5.0",
    "aws-sdk": "^2.585.0",
    "core-js": "3.4.7",
    "js-md5": "^0.7.3",
    "jwt-decode": "^2.2.0",
    "mdi-material-ui": "^6.9.0",
    "pdfjs-dist": "^2.2.228",
    "react": "^16.12.0",
    "react-app-polyfill": "^1.0.5",
    "react-dom": "^16.12.0",
    "react-intl": "^3.9.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "sanitize-html": "^1.20.1",
    "uuid": "^3.3.3"
  },
  "scripts": {
    "start-dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start-prod": "node server.js",
    "prettify": "prettier --write --single-quote 'src/**/*.js'"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "prettier": "1.19.1",
    "react-test-renderer": "^16.12.0"
  }
}

Based on a suggestion from an older issue (#4436) I attempted to solve this by instead running:

node --expose-gc --max-old-space-size=8192 node_modules/react-scripts/scripts/build.js

This did fix the issue, but I would rather not have to manually configure this for all our commands if it's not necessary (I've also noticed this intermittently happens while the webpack server is running via react-scripts start). Is there a change that was made in 3.3.0 that could have caused this? I've never seen this before, and this update was made in isolation so our code hasn't gotten larger/more complex. I do have a workaround, like I said, but I would definitely appreciate some insight on this to make sure something worse isn't happening deeper inside.

Thank you!

EDIT: Also confirmed working with react-scripts --max_old_space_size=8192 build. Again, have a workaround, but would be nice to know why it's using so much more memory now.

Did you try recovering your dependencies?

Yes, I tried clearing the existing node_modules folder and yarn.lock.

Which terms did you search for in User Guide?

I looked for any term related to memory/heap issues, and I couldn't find anything. I did find references to this error here: #4436. I also found references to the error, with a similar solution to the one posted in that issue (--max-old-space-size) in other projects.

npx: installed 91 in 4.608s

Environment Info:

  System:
    OS: Linux 4.15 Alpine Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.14.1 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^16.12.0 => 16.12.0 
    react-dom: ^16.12.0 => 16.12.0 
    react-scripts: 3.3.0 => 3.3.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Start with a CRA application using react-scripts version 3.2.0
2. Update application to use version 3.3.0
3. Run yarn build

Expected behavior

Optimized production build should be produced.

Actual behavior

As mentioned above, the following error is thrown:

$ react-scripts build
Creating an optimized production build...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

<--- Last few GCs --->

[36:0x55e4757695a0]    34633 ms: Scavenge 1385.6 (1423.7) -> 1384.9 (1424.2) MB, 3.2 / 0.0 ms  (average mu = 0.093, current mu = 0.056) allocation failure 
[36:0x55e4757695a0]    34637 ms: Scavenge 1386.1 (1424.2) -> 1385.6 (1424.7) MB, 3.1 / 0.0 ms  (average mu = 0.093, current mu = 0.056) allocation failure 
[36:0x55e4757695a0]    34642 ms: Scavenge 1386.2 (1424.7) -> 1385.6 (1425.2) MB, 3.3 / 0.0 ms  (average mu = 0.093, current mu = 0.056) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x2061b015be1d]
Security context: 0x00a8b719e6e1 <JSObject>
    1: SourceMapConsumer_allGeneratedPositionsFor [0x18f3002779b9] [/soom-web-apps/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x2061b0dbafe5](this=0x2fb0c7702291 <BasicSourceMapConsumer map = 0x133f8c137839>,aArgs=0x3a559fc82221 <Object map = 0x133f8c132509>)
    2: /* anonymous */(aka /* anonymous */) [0x12fc24144c...

Aborted (core dumped)
error Command failed with exit code 134.

Reproducible demo

As mentioned above, I'm working on reproducing this in isolation outside of our app, but that will take a bit (also, it may just have to do with our code size/dependency graph, in which case it won't be reproducible in a basic starter app).

[petetnt]

Also discussed in #8096

[jdtriska]

Also discussed in #8096

Thanks--don't know how I missed that! This may indeed be a duplicate of that issue.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ianschmitz]

Closing as dupe of #8096.