react-cytoscapejs
react-cytoscapejs copied to clipboard
Issues with React 18 StrictMode
React 18 brings some infamous changes to the way StrictMode works during development (see https://coderpad.io/blog/development/why-react-18-broke-your-app/).
This also seems to cause some issues with this library. I encountered the first error in a piece of code that uses useEffect
to re-run the layout whenever the elements change. I have created an SSCCE here:
https://codesandbox.io/s/cytoscape-react18-strict-mode-ysrugk
This code worked with React 17. Now, you have to remove the <StrictMode>
in index.js
to make it work again. This is only an issue during development. If you build a production version of the app, it works normally.
I also encountered the following error after swallowing this one with a try-catch.
Uncaught TypeError: Cannot read properties of undefined (reading 'h')
at GridLayout.run (cytoscape.cjs.js:18308:1)
at setElesAndLayout (cytoscape.cjs.js:16254:1)
at cytoscape.cjs.js:16264:1
at loadExtData (cytoscape.cjs.js:16219:1)
at new Core (cytoscape.cjs.js:16256:1)
at new cytoscape (cytoscape.cjs.js:27669:1)
at w.componentDidMount (react-cytoscape.modern.js:180:1)
at invokeLayoutEffectMountInDEV (react-dom.development.js:21710:1)
at invokeEffectsInDev (react-dom.development.js:23628:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:23609:1)
In my app, this is only triggered when opening the graph in a modal. I was not able to reproduce this in an SSCCE but maybe the stack trace helps.
This is a major blocker for my team as well
https://github.com/plotly/react-cytoscapejs/blob/3808c36148f6e79ad2be8cd76f20db9dfaa11a57/src/component.js#L61
This looks like it could be the problem.
yes, I'm also facing a similar issue with getting the cy element back from CytoscapeComponent
my workaround is currently putting all of my useEffect(() => doStuffWithCy(cy))
code into a setTimeout
with 1 ms...and it seem to work)