plotly / react-cytoscapejs

React component for Cytoscape.js network visualisations
MIT License
483 stars 68 forks source link

Maximum call stack size exceeded #104

Open srgg opened 2 years ago

srgg commented 2 years ago

I've tried to use a basic example, then switch to FC approach, but simple graph app still fails.

Here is a code:

import React, {useRef, useCallback, FC} from 'react';
import CytoscapeComponent from 'react-cytoscapejs';
import type cytoscape from 'cytoscape';

export const СytoscapeGraph: FC = () => {
    const cy = useRef<cytoscape.Core | null>(null);
    const setCytoscape = useCallback(
        (ref: cytoscape.Core) => {
            cy.current = ref;
        },
        [cy],
    );
    const data = {
        nodes: [
            { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
            { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } }
        ],
        edges: [
            {
                data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' }
            }
        ]
    }

    const elements = CytoscapeComponent.normalizeElements(data);

    return (
        <CytoscapeComponent
            cy={setCytoscape}
            elements={elements}
        />
    );
}

export default СytoscapeGraph;

And I've got:

image
bgenia commented 1 year ago

Had this issue after migrating from webpack 4 to 5. Turned out it was caused by this webpack setting:

{
  resolve: {
    modules: ['node_modules', 'src']
  }
}

Fixed by removing the setting