Windows 10
npx 6.13.7
node 13.11.0 OR 12.5.0 OR 10.15.3 (tried all three)
I made a create-react-app using two node versions on Windows 10.
npx create-react-app testapp
I followed directions to install plotly.js for react apps https://plot.ly/javascript/react/
npm install react-plotly.js plotly.js
When I add the Plot import to src/App.js file
import Plot from 'react-plotly.js';
and start the app with npm start
, it fails with this FATAL error.
I tried three node versions 10.15.3, 12.5, 13.11, but same problem. What is wrong?
Starting the development server...
<--- Last few GCs --->
start of marking 2584 ms) (average mu = 0.142, current mu = 0.014)[5512:0000023627EBA530] 48772 ms: Mark-sweep 2044.7 (2057.4) -> 2044.1 (2054.1) MB, 3083.4 / 0.0 ms (+ 18.9 ms in 3 steps since start of marking, biggest step 11.5 ms, walltime since start of marking 3107 ms) (average mu = 0.067, current mu = 0.001) a[5512:0000023627EBA530] 51760 ms: Mark-sweep 2045.0 (2054.1) -> 2044.7 (2054.6) MB, 2984.7 / 0.0 ms (average mu = 0.034, current mu = 0.001) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 00007FF66778528D]
1: StubFrame [pc: 00007FF667786105]
2: StubFrame [pc: 00007FF6677C7E9F]
Security context: 0x02df05840921 <JSObject>
3: replace [000002DF0584CDD1](this=0x0064b562ce11 <String[79]: C:\Users\Nicole Wheatley\Desktop\ZZ\myapp\node_modules\plotly.js\dist\plotly.js>,0x0059645ef5d9 <JSRegExp <String[#2]: \\>>,0x02df05873e59 <String[#1]: />)
4: _append [000003BEF2CD61A1] [C:\Users\Nicole Whea...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
Writing Node.js report to file: report.20200316.171653.5512.0.001.json
Node.js report completed
1: 00007FF666B6D98F napi_wrap+111663
2: 00007FF666B0C406 public: bool __cdecl v8::base::CPU::has_sse(void)const __ptr64+57574
3: 00007FF666B0D2A3 public: bool __cdecl v8::base::CPU::has_sse(void)const __ptr64+61315
4: 00007FF66733B93E private: void __cdecl v8::Isolate::ReportExternalAllocationLimitReached(void) __ptr64+94
5: 00007FF667323091 public: void __cdecl v8::SharedArrayBuffer::Externalize(class std::shared_ptr<class v8::BackingStore> const & __ptr64) __ptr64+785
6: 00007FF6671EA0FC public: static void __cdecl v8::internal::Heap::EphemeronKeyWriteBarrierFromCode(unsigned __int64,unsigned __int64,class v8::internal::Isolate * __ptr64)+1468
7: 00007FF6671F5440 public: void __cdecl v8::internal::Heap::ProtectUnprotectedMemoryChunks(void) __ptr64+1312
8: 00007FF6671F1F34 public: static bool __cdecl v8::internal::Heap::PageFlagsAreConsistent(class v8::internal::HeapObject)+3188
9: 00007FF6671E7643 public: bool __cdecl v8::internal::Heap::CollectGarbage(enum v8::internal::AllocationSpace,enum v8::internal::GarbageCollectionReason,enum v8::GCCallbackFlags) __ptr64+1283
10: 00007FF6671E5DD4 public: void * __ptr64 __cdecl v8::internal::Heap::AllocateExternalBackingStore(class std::function<void * __ptr64 __cdecl(unsigned __int64)> const & __ptr64,unsigned __int64) __ptr64+1396
11: 00007FF667207EA4 public: class v8::internal::Handle<class v8::internal::HeapObject> __cdecl v8::internal::Factory::NewFillerObject(int,bool,enum v8::internal::AllocationType,enum v8::internal::AllocationOrigin) __ptr64+196
12: 00007FF666F62271 public: class v8::internal::interpreter::JumpTableTargetOffsets::iterator & __ptr64 __cdecl v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=(class v8::internal::interpreter::JumpTableTargetOffsets::iterator && __ptr64) __ptr64+1681
13: 00007FF66778528D public: virtual bool __cdecl v8::internal::SetupIsolateDelegate::SetupHeap(class v8::internal::Heap * __ptr64) __ptr64+517453
14: 00007FF667786105 public: virtual bool __cdecl v8::internal::SetupIsolateDelegate::SetupHeap(class v8::internal::Heap * __ptr64) __ptr64+521157
15: 00007FF6677C7E9F public: virtual bool __cdecl v8::internal::SetupIsolateDelegate::SetupHeap(class v8::internal::Heap * __ptr64) __ptr64+790879
UPDATE:
Instead of importing
import Plot from 'react-plotly.js';
I imported in steps:
//const Plotly = window.Plotly; //this didn't work for me
import Plotly from "plotly.js"
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);
credit : dhamaniasad
And this was able to load without hitting memory cap.
I am using latest versions of plotly@1.52.3 react-plotly@2.4.0 and node@13.11.0.