Memory heap issue

[jithinktom]

Hi,

I tried to plot a simple Anychart with create-react-app project. But, it is giving me "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error.

The code of my component is :

import React from "react";
import AnyChart from 'anychart-react'

class NewChart extends React.Component {

    render() {
        return (
            <div className="chart-component">
                <div className="chart-section">
                    <AnyChart
                        type="pie"
                        data={[1, 2, 3, 4]}
                        title="Simple pie chart"
                    />
                </div>
            </div>
        );
    }
}

export default NewChart;

[Shestac92]

@jithinktom
Thank you for your report, we will try to reproduce the issue.

[jithinktom]

@Shestac92 Any updates on this issue?

[manikandanm1757]

@Shestac92 ,

Me also facing this issue, after installing anychart or anychart-react libraries in application which is created by create-react-app cli.
Check and update if any details on this.

[Shestac92]

@jithinktom @manikandanm1757
Unfortunately, at the moment we have no solution for the case when the application is created using create-react-app.
But it works correctly if the AnyChart is integrated into an existing app as NPM dependency. For details, check the demo app.

[CodeMasterZeroOne]

Just installed AnyChart to try it in react app and it does not work. I get the same error as @jithinktom .
Has anyone resolution how to fix this issue?

[angetresca]

Have the same issue in a react app 👎

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

[vkvk2021]

---

Facing the same issue. The error I am getting is:

ERROR in ./src/components/SitesOverview_1.js 8:0-45
Module not found: Error: Can't resolve 'anychart-react.min.js' in 'C:\Users\manager\Desktop\CyberOne\cyberonereact\src\components'
resolve 'anychart-react.min.js' in 'C:\Users\manager\Desktop\CyberOne\cyberonereact\src\components'
Parsed request is a module
using description file: C:\Users\manager\Desktop\CyberOne\cyberonereact\package.json (relative path: ./src/components)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
C:\Users\manager\Desktop\CyberOne\cyberonereact\src\components\node_modules doesn't exist or is not a directory
C:\Users\manager\Desktop\CyberOne\cyberonereact\src\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules
single file module
using description file: C:\Users\manager\Desktop\CyberOne\cyberonereact\package.json (relative path: ./node_modules/anychart-react.min.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js doesn't exist
.web.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.web.mjs doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.mjs doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.web.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js.jsx doesn't exist
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js doesn't exist
C:\Users\manager\Desktop\CyberOne\node_modules doesn't exist or is not a directory
C:\Users\manager\Desktop\node_modules doesn't exist or is not a directory
C:\Users\manager\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules
single file module
using description file: C:\Users\manager\Desktop\CyberOne\cyberonereact\package.json (relative path: ./node_modules/anychart-react.min.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\manager\Desktop\CyberOne\cyberonereact\node_modules\anychart-react.min.js doesn't exist
.web.mjs
Field 'browser' doesn't contain a valid alias configuration
Compiling...

<--- Last few GCs --->

[3676:000002B6512BE510] 968640 ms: Scavenge 2024.4 (2069.8) -> 2023.7 (2080.1) MB, 6.3 / 0.0 ms (average mu = 0.235, current mu = 0.104) allocation failure
[3676:000002B6512BE510] 968696 ms: Scavenge 2031.2 (2080.6) -> 2029.4 (2082.1) MB, 12.0 / 0.0 ms (average mu = 0.235, current mu = 0.104) allocation failure
[3676:000002B6512BE510] 969590 ms: Scavenge 2032.7 (2082.1) -> 2031.3 (2102.6) MB, 880.5 / 0.0 ms (average mu = 0.235, current mu = 0.104) allocation failure

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7135D30AF v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112511
Starting the development server...

<--- Last few GCs --->

[7016:0000012A69F2D8C0] 63906 ms: Scavenge 2020.9 (2065.9) -> 2020.3 (2076.4) MB, 7.9 / 0.0 ms (average mu = 0.244, current mu = 0.100) allocation failure
[7016:0000012A69F2D8C0] 63942 ms: Scavenge 2027.7 (2076.7) -> 2026.0 (2078.4) MB, 9.3 / 0.0 ms (average mu = 0.244, current mu = 0.100) allocation failure
[7016:0000012A69F2D8C0] 64962 ms: Scavenge 2029.1 (2078.4) -> 2027.7 (2098.7) MB, 1007.8 / 0.0 ms (average mu = 0.244, current mu = 0.100) allocation failure

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7135D30AF v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112511
2: 00007FF713562216 DSA_meth_get_flags+65542
3: 00007FF7135630CD node::OnFatalError+301
4: 00007FF713E94B6E v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF713E7F09D v8::SharedArrayBuffer::Externalize+781
6: 00007FF713D2268C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
7: 00007FF713D1F7C4 v8::internal::Heap::CollectGarbage+4244
8: 00007FF713D1D140 v8::internal::Heap::AllocateExternalBackingStore+2000
9: 00007FF713D41A76 v8::internal::Factory::NewFillerObject+214
10: 00007FF713A74CB5 v8::internal::DateCache::Weekday+1797
11: 00007FF713F22541 v8::internal::SetupIsolateDelegate::SetupHeap+494417
12: 0000012A6C21D97A

---

Versions:
npm - v8.1.2
node - v16.13.1
"anychart": "^8.11.0",
"anychart-react": "^1.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",

---

The app was created using npx create-react-app .

[subatomicceo]

I ran into the same issue. In our case it appears to be due to the size of the source maps after adding AnyChart-React as a dependency to our project.

FWIW I was able to solve this by setting GENERATE_SOURCEMAP=false in our CI environment variables. See Create React Apps Advanced Configuration Docs for more info.

If that doesn't work you can also try to increase JavaScript heap size in your create-react-app project. Hope this helps!