React-Scripts start command throws JavaScript heap out of memory error

Question

Describe the bug

When I start react application with npm start command, it failed to start the application and throws the error Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory.

I tried to change the start script by adjusting max_old_space_size to 8192 but that still does not fix the issue.

$ react-scripts --max_old_space_size=4096 start
$ react-scripts --max_old_space_size=8192 start

I looked at existing issues/solutions in Github repo and here, nothing fixed my issue.

Did you try recovering your dependencies?

Yes, I did. It did not fix the issue.

I deleted node_modules and tried to install them using following commands
```
$npm install
$npm start
```
Then deleted them again and installed and ran again with commands
```
$yarn install
$yarn start
```

Which terms did you search for in User Guide?

Yes, I searched for heap memory error and didn't find anything useful

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/jaddap2/.npm/_npx/9378/lib/node_modules/create-react-app

  System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.16.1 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.12 - /usr/local/opt/node@14/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Edge: 89.0.774.75
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 4.0.3 => 4.0.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Clone the repo and follow the instructions below

Clone the repo https://github.com/pavankjadda/react-scripts-bug
And run the commands

$ npm install
$ npm start

Expected behavior

Start the application without any issues

Actual behavior

Sees an error Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory. Stack Trace:

Starting the development server...


<--- Last few GCs --->

[9019:0x1044f3000]   136716 ms: Scavenge (reduce) 8129.9 (8155.3) -> 8129.4 (8155.8) MB, 7.7 / 0.0 ms  (average mu = 0.356, current mu = 0.337) allocation failure 
[9019:0x1044f3000]   136724 ms: Scavenge (reduce) 8130.2 (8152.8) -> 8129.6 (8153.8) MB, 6.9 / 0.0 ms  (average mu = 0.356, current mu = 0.337) allocation failure 
[9019:0x1044f3000]   136747 ms: Scavenge (reduce) 8130.3 (8152.8) -> 8129.8 (8153.8) MB, 21.7 / 0.0 ms  (average mu = 0.356, current mu = 0.337) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x100097949 node::Abort() [/usr/local/Cellar/node@14/14.16.1/bin/node]
 2: 0x100097abf node::OnFatalError(char const*, char const*) [/usr/local/Cellar/node@14/14.16.1/bin/node]
 3: 0x1001a42c1 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node@14/14.16.1/bin/node]
 4: 0x1001a426b v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node@14/14.16.1/bin/node]
 5: 0x1002def55 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/Cellar/node@14/14.16.1/bin/node]
 6: 0x1002e0214 v8::internal::Heap::MarkCompactPrologue() [/usr/local/Cellar/node@14/14.16.1/bin/node]
 7: 0x1002ddb20 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/Cellar/node@14/14.16.1/bin/node]
 8: 0x1002dc03d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/Cellar/node@14/14.16.1/bin/node]
 9: 0x1002e5164 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/node@14/14.16.1/bin/node]
10: 0x1002e51ba v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/node@14/14.16.1/bin/node]
11: 0x1002c363b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/Cellar/node@14/14.16.1/bin/node]
12: 0x1005424ea v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/Cellar/node@14/14.16.1/bin/node]
13: 0x1007e4119 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/Cellar/node@14/14.16.1/bin/node]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-scripts-bug@0.1.0 start: `react-scripts  --max_old_space_size=8192 start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-scripts-bug@0.1.0 start 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!     /Users/jaddap2/.npm/_logs/2021-04-13T03_22_17_319Z-debug.log

Reproducible demo