profile
viewpoint

Ask questions`yarn build --watch` throwing "JavaScript heap out of memory".

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? Reporting a bug regarding the yarn build.

What is the current behavior? Running yarn build --watch is throwing JavaScript heap out of memory.

Here's the complete log:

<--- Last few GCs --->

[74510:0x103800000]    84468 ms: Mark-sweep 1317.9 (1442.4) -> 1306.5 (1443.9) MB, 589.0 / 0.0 ms  (average mu = 0.251, current mu = 0.114) allocation failure scavenge might not succeed
[74510:0x103800000]    85163 ms: Mark-sweep 1321.0 (1443.9) -> 1309.3 (1444.4) MB, 596.7 / 0.0 ms  (average mu = 0.210, current mu = 0.142) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x51a72adbe3d]
Security context: 0x176d9701e6e1 <JSObject>
    1: decode$$1(aka decode$$1) [0x176dffbe8169] [/Users/300067056/playground/random/react/node_modules/rollup/dist/rollup.js:~297] [pc=0x51a739966b9](this=0x176d9f8026f1 <undefined>,mappings=0x176d325aa201 <Very long string[26873]>)
    2: /* anonymous */(aka /* anonymous */) [0x176d325a76b1] [/Users/300067056/playground/random/react/node_modules/rollup/dist...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003b1db node::Abort() [/usr/local/bin/node]
 2: 0x10003b3e5 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x1001a86b5 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x100573ad2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 5: 0x1005765a5 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
 6: 0x10057244f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 7: 0x100570624 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x10057cebc v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0x10057cf3f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x10054c884 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
11: 0x1007d4894 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x51a72adbe3d
13: 0x51a739966b9
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: The bug is related to yarn build. If we run yarn build with watch mode enabled, then it's throwing out of memory exception.

What is the expected behavior? It should not throw an exception.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Not sure about the previous versions. I am exploring the code base of React for learning.

OS: macOs Mojave Version: 10.14.3(18D109) MacBook Pro (Retina, 15-inch, Mid 2015) Processor: 2.2 GHz Intel Core i7 Memory: 16 GB 1600 MHz DDR3

NodeJs: v10.15.1 npm: 6.9.0

facebook/react

Answer questions Dergash

Hello @hk-skit! It's not the problem with React itself but with your build process. NodeJS has a limited heap size (~1.5 GB) that might not be enough for your app to launch with '--watch' mode. You could use '--max-old-space-size' flag to set a different heap size. Here are examples for webpack and for create-react-app.

useful!
source:https://uonfu.com/
answerer
Constantine Dergachev Dergash AT Consulting :electron: Building enterprise software
Github User Rank List