I can't run the react app with Plotly JS Chart

[19smabtahinoor]

First I have added plotly chart in my react app then I write the command yarn start or npm start"". It gives an error. I can't understand. Please help me... .. When I remove the plotly chart code, the react app runs well in the browser.**

Here is the error ::

`$ yarn start
yarn run v1.22.10
$ npm run watch:css && react-scripts start

[email protected] watch:css K:\Client Projects\2nd Project with Shahwar Asif\CortexLink-React
postcss src/assets/tailwind.css -o src/assets/main.css

i ｢wds｣: Project is running at http://192.168.0.3/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from K:\Client Projects\2nd Project with Shahwar Asif\CortexLink-React\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

<--- Last few GCs --->

[16912:000002A8F539CF80] 142640 ms: Mark-sweep (reduce) 2041.6 (2051.5) -> 2041.2 (2052.8) MB, 9592.4 / 0.1 ms (average mu = 0.074, current mu = 0.001) allocation failure scavenge might not succeed
[16912:000002A8F539CF80] 151263 ms: Mark-sweep (reduce) 2042.1 (2054.8) -> 2041.8 (2055.3) MB, 8616.2 / 0.2 ms (average mu = 0.038, current mu = 0.001) allocation failure GC in old space requested

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF6F3953E0F napi_wrap+108911
2: 00007FF6F38F7E16 v8::base::CPU::has_sse+61910
3: 00007FF6F38F8D16 node::OnFatalError+294
4: 00007FF6F41D0CEE v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF6F41B5ACD v8::SharedArrayBuffer::Externalize+781
6: 00007FF6F405F95C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1516
7: 00007FF6F406ACEA v8::internal::Heap::ProtectUnprotectedMemoryChunks+1258
8: 00007FF6F4067E99 v8::internal::Heap::PageFlagsAreConsistent+2457
9: 00007FF6F405CA71 v8::internal::Heap::CollectGarbage+2033
10: 00007FF6F405AC95 v8::internal::Heap::AllocateExternalBackingStore+1349
11: 00007FF6F407AFEB v8::internal::Factory::NewFillerObject+203
12: 00007FF6F3DA9E0F v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1039
13: 00007FF6F4259BAD v8::internal::SetupIsolateDelegate::SetupHeap+465229
14: 000000AC76EEF4D4
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`

[Rory-Sullivan]

I am experiencing the same issue on a freshly created React project.

Steps to re-produce:

• Create a new React app with create-react-app npx create-react-app react-plotly
• Install plotly npm install react-plotly.js plotly.js
• Add the plot described in the getting started guide to the application

// App.js
import Plot from 'react-plotly.js';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Plot
          data={[
            {
              x: [1, 2, 3],
              y: [2, 6, 3],
              type: 'scatter',
              mode: 'lines+markers',
              marker: { color: 'red' },
            },
            { type: 'bar', x: [1, 2, 3], y: [2, 5, 3] },
          ]}
          layout={{ width: 320, height: 240, title: 'A Fancy Plot' }}
        />
      </header>
    </div>
  );
}

export default App;

• Attempt to run npm start

Also fails if you try to build the application with npm run build.

If you need any more information let me know.

[19smabtahinoor]

@Rory-Sullivan Thanks !!! I have solved my problem...

[Rory-Sullivan]

@19smabtahinoor How did you solve your issue? I am still experiencing it.

[dheeraj-murali]

@Rory-Sullivan Try this this is what worked for me
#135 (comment)