Javascript runs out of memory when making production build
See original GitHub issueWhen I try to build a prod version of my create-react-app using npm run build
, I get the following error:
<--- Last few GCs --->
[7898:0x104800000] 66632 ms: Mark-sweep 1329.1 (1449.4) -> 1317.7 (1451.4) MB, 564.0 /
0.0 ms (average mu = 0.110, current mu = 0.031) allocation failure scavenge might not succeed
[7898:0x104800000] 67209 ms: Mark-sweep 1331.4 (1451.4) -> 1320.0 (1453.9) MB, 559.9 /
0.0 ms (average mu = 0.072, current mu = 0.030) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x1c05060cfc7d]
1: StubFrame [pc: 0x1c05060c8bd9]
Security context: 0x298c12a1d949 <JSObject>
2: split [0x298c12a0f5c9](this=0x298c12a22391 <String[1]: 4>,0x298c508c3b91 <JSRegExp
<String[5]: \r?\n>>)
3: I [0x298cef46c9f1] [/Users/arshpreetsinghbhatti/Desktop/portal-
ui/node_modules/terser/dist/bundle.js:~44] [pc=0x1c050616d8f8](this=0x298cef46ca71 <Object
map = 0x298c72bc68b1>,0x298c12a22391 <String[1]: 4...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out
of memory
Writing Node.js report to file: report.20190304.101657.7898.001.json
Node.js report completed
1: 0x10006313d node::Abort() [/usr/local/bin/node]
2: 0x100063894 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: 0x1001a5ca7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool)
[/usr/local/bin/node]
4: 0x1001a5c44 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*,
bool) [/usr/local/bin/node]
5: 0x1005aada2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
6: 0x1005ad2d3 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double)
[/usr/local/bin/node]
7: 0x1005a9808 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector,
v8::GCCallbackFlags) [/usr/local/bin/node]
8: 0x1005a79c5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace,
v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x1005b426c v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationSpace,
v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x1005b42ef v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace,
v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x1005834e4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace)
[/usr/local/bin/node]
12: 0x100835a04 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**,
v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x1c05060cfc7d
I tried to use the workaround suggested in https://github.com/plotly/react-plotly.js/issues/26#issuecomment-359925194
I inserted the preset in webpack.config.prod
file, with
{ test: /\.js$/, use: 'ify-loader', }, { test: /\.js$/, use: 'transform-loader?plotly.js/tasks/compress_attributes.js', },
But it still runs out of memory when I do npm run build
Here’s a sandbox for reference: https://codesandbox.io/s/381yjyn415
I’ve taken the liberty of adding all the dependencies that I use in my project.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
How to Fix JavaScript Heap Out of Memory Error - MakeUseOf
This error usually occurs when the default memory allocated by your system to Node. js is not enough to run a large project....
Read more >JavaScript Heap Out Of Memory Error - OpenReplay Blog
A quick solution that you can use to fix "Heap Out Of Memory Error" in JavaScript. We lay out the causes and how...
Read more >Node.js heap out of memory - Stack Overflow
When I run the command npm run build , I see some processes running with commands like usr/bin/node --max_old_space_size=2048 . What could be ......
Read more >Javascript runs out of memory when making production build
The production version builds fine when I use --max_old_space_size=8192 and takes about ~2 mins to build. ... I've taken the liberty of adding...
Read more >JavaScript heap out of memory when running a react app
In this article, I have shared some common ways of solving memory leak issues in your application either by increasing the memory allocated...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@hitesh171285 You can import from plotly.js like this :
and then you can import this Plotly object into your react component like:
This const
Plot
can be then used as a React Component like <Plot/> with appropriate props for whatever plot you intend to use.This should reduce the size of the bundle to a lot less.
Update: It builds fine when I use
--max_old_space_size=8192
, so 8 gigs to build the project and it takes ~2 mins. I think there should be a way to build it with memory set to default value.