react-cytoscapejs
react-cytoscapejs copied to clipboard
Maximum call stack size exceeded
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:

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