Black Lives Matter. Please consider donating to Black Girls Code today.

React-plotly not working with create-react-app: UPDATE

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

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


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.

1 Like