Crashes when using Create-React-App

[DalderupMaurice]

Hi!

Using Create-React-App (latest version right now) with Typescript in a yarn workspace monorepo, importing and using this library resulted in the following error when trying to start the application for development:

[start:web     ] i ｢wds｣: Project is running at http://<ip>/
[start:web     ] i ｢wds｣: webpack output is served from /
[start:web     ] i ｢wds｣: Content not from webpack is served from D:\Development\app\packages\web\public
[start:web     ] i ｢wds｣: 404s will fallback to /index.html
[start:web     ] Starting the development server...
[start:web     ] 
[start:web     ] FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
[start:web     ]  1: 00007FF76645F04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
[start:web     ]  2: 00007FF76643A0C6 node::MakeCallback+4518
[start:web     ]  3: 00007FF76643AA30 node_module_register+2032
[start:web     ]  4: 00007FF7666C20EE v8::internal::FatalProcessOutOfMemory+846
[start:web     ]  5: 00007FF7666C201F v8::internal::FatalProcessOutOfMemory+639
[start:web     ]  6: 00007FF766BE2BC4 v8::internal::Heap::MaxHeapGrowingFactor+9556
[start:web     ]  7: 00007FF766BD9C46 v8::internal::ScavengeJob::operator=+24310
[start:web     ]  8: 00007FF766BD829C v8::internal::ScavengeJob::operator=+17740
[start:web     ]  9: 00007FF766BE0F87 v8::internal::Heap::MaxHeapGrowingFactor+2327
[start:web     ] 10: 00007FF766BE1006 v8::internal::Heap::MaxHeapGrowingFactor+2454
[start:web     ] 11: 00007FF76679CDB7 v8::internal::Factory::NewFillerObject+55
[start:web     ] 12: 00007FF766832CC6 v8::internal::WasmJs::Install+29414
[start:web     ] 13: 000000D4B275C5C1
[start:web     ] error Command failed with exit code 134.
[start:web     ] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[start:web     ] error Command failed.
[start:web     ] Exit code: 134
[start:web     ] Command: C:\Program Files\nodejs\node.exe
[start:web     ] Arguments: C:\Users\Maurice\AppData\Roaming\npm\node_modules\yarn\lib\cli.js start
[start:web     ] Directory: D:\Development\app\packages\web
[start:web     ] Output:
[start:web     ] 
[start:web     ] info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
[start:web     ] error Command failed with exit code 134.
[start:web     ] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "start:web" exited with 134.

When removing the code snippet below, the application started working again

const randomName = uniqueNamesGenerator({
  length: 2,
  separator: ' ',
  style: 'capital',
  dictionaries: [colors, animals]
});

[andreasonny83]

Hi @DalderupMaurice
From what I can see, this looks like a create-react-app problem. I saw this discussion several times around the web (example here: facebook/create-react-app#4436)
A quick fix would be to just use Node v12 or pass an extra flag to your react-app script like: node --max-old-space-size=4000 npm run start

Let me know if that helps so I can either close the ticket or run more investigation

[yuriteixeira]

We don't use create-react-app and we're having the same issues.

Having the same issue here, and neither using node 12 or passing an extra param are options at the moment, unfortunately.

NOTE: We have close to 100 dependencies and none caused this issue.

[0] <--- Last few GCs --->
[0]
[0] [82193:0x108008000]    31907 ms: Scavenge 1377.1 (1423.0) -> 1376.4 (1423.5) MB, 2.2 / 0.0 ms  (average mu = 0.186, current mu = 0.150) allocation failure
[0] [82193:0x108008000]    31910 ms: Scavenge 1377.4 (1423.5) -> 1376.8 (1424.0) MB, 2.4 / 0.0 ms  (average mu = 0.186, current mu = 0.150) allocation failure
[0] [82193:0x108008000]    31913 ms: Scavenge 1377.5 (1424.0) -> 1376.9 (1425.0) MB, 2.2 / 0.0 ms  (average mu = 0.186, current mu = 0.150) allocation failure
[0]
[0]
[0] <--- JS stacktrace --->
[0]
[0] ==== JS stack trace =========================================
[0]
[0]     0: ExitFrame [pc: 0x10826fa5be3d]
[0] Security context: 0x316711e9e6e9 <JSObject>
[0]     1: SourceMapConsumer_allGeneratedPositionsFor [0x3167b98b6ce9] [/Users/yuriteixeira/Projects/XYZ/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x1082705060fb](this=0x3167ec7dc919 <BasicSourceMapConsumer map = 0x3167a1690641>,aArgs=0x316777082249 <Object map = 0x31677df5c461>)
[0]     2: /* anonymous */(aka /...
[0]
[0] FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
[0]  1: 0x10003c597 node::Abort() [/usr/local/bin/node]
[0]  2: 0x10003c7a1 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
[0]  3: 0x1001ad575 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
[0]  4: 0x100579242 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
[0]  5: 0x10057bd15 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
[0]  6: 0x100577bbf v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
[0]  7: 0x100575d94 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
[0]  8: 0x10058262c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
[0]  9: 0x1005826af v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
[0] 10: 0x100551ff4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
[0] 11: 0x1007da044 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
[0] 12: 0x10826fa5be3d
[0] 13: 0x1082705060fb

[yuriteixeira]

While searching for a replacement to the lib, I decided to try v3 just in case, and it worked for me @DalderupMaurice

[DalderupMaurice]

While searching for a replacement to the lib, I decided to try v3 just in case, and it worked for me @DalderupMaurice

Oh great! I haven't found any other solutions, but the ones proposed by @andreasonny83 (more specifically - upgrading to node 12) have done the job for me.

[andreasonny83]

Glad to hear that. thanks

[brkastner]

v4 works if you add the following to your .env file:

SKIP_PREFLIGHT_CHECK=true

(taken from storybookjs/storybook#5183)