FATAL ERROR: heap out of memory

[nukisman]

New project created with create-react-app --typescript. Working ok.

When I add some <Graphiz ...> component from examples like this: App.tsx:

import React from 'react';
import './App.css';
import { Graphviz } from 'graphviz-react';

const App: React.FC = () => {
  return (
    <div className="App">
      <Graphviz dot={`graph {
        grandparent -- "parent A";
        child;
        "parent B" -- child;
        grandparent --  "parent B";
      }`} />
    </div>
  );
}

export default App;

It compiles ok but gives error on start:

$ yarn start
yarn run v1.17.3
Starting the development server...

<--- Last few GCs --->

[83254:0x102654000]    24456 ms: Mark-sweep 1319.0 (1443.7) -> 1307.6 (1445.2) MB, 1568.6 / 0.0 ms  (average mu = 0.134, current mu = 0.032) allocation failure scavenge might not succeed
[83254:0x102654000]    26318 ms: Mark-sweep 1320.5 (1445.7) -> 1308.8 (1448.2) MB, 1727.9 / 0.0 ms  (average mu = 0.102, current mu = 0.072) allocation failure scavenge might not succeed

<--- JS stacktrace --->

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x26d6e2adbe3d]
    1: StubFrame [pc: 0x26d6e2add3c6]
Security context: 0x0769b919e6e9 <JSObject>
    2: endsWith [0x7696e326121] [/Users/uruk/job/genealogy-fe/node_modules/react-scripts/node_modules/@babel/generator/lib/buffer.js:~143] [pc=0x26d6e31866f9](this=0x07690af094c9 <Buffer map = 0x76916208d99>,suffix=0x076935af7891 <String[2]\: {\n>)
    3: printJoin [0x7690af08709] [/Users/uruk/job/genealogy-fe/node_modul...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003c597 node::Abort() [/usr/local/bin/node]
 2: 0x10003c7a1 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x1001ad575 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x100579242 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 5: 0x10057bd15 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
 6: 0x100577bbf v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 7: 0x100575d94 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x10058262c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0x1005826af v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x100551ff4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
11: 0x1007da044 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x26d6e2adbe3d 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Env and configs:

OS: MacOS Mojave 10.14.6

node -v
v10.15.3

package.json:

{
  "name": "genealogy-fe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "12.7.5",
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "graphviz-react": "^1.0.4",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "typescript": "3.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

[magjac]

This might be the same problem as https://github.com/magjac/graphviz-visual-editor/issues/95

[DomParfitt]

There is a note about this in the readme: https://github.com/DomParfitt/graphviz-react/blob/master/README.md#install.

Essentially there is an issue in a library that is a dependency of this package. The readme contains details of a work around.

[nukisman]

@magjac @DomParfitt Thanks a lot! This helps:

"scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build"
}