概要

下記エラーが出る現象に悩まされていた。

cytoscape-DbdlAXfE.js:4 Uncaught TypeError: Cannot read properties of null (reading 'isHeadless')

エラーについて

何故かthis.rendereがnullになっている。
e.registerBinding([t, D], mousemove, function(t) {のように、mouseoverイベントで出るものだから真っ赤。

対策

原因が追いきれなかったが、オプションにlayoutを渡すと発生する模様。
暫定的に下記のようにすると回避できることが分かった

    const defaultLayout = {
      name: 'cose',
      padding: 50,
    };
    const cy = cytoscape({
      container: containerRef.current,
      elements: { nodes, edges },
-      layout: defaultLayout,
      style: cytoscapeStylesheet,
      userZoomingEnabled: true,
      userPanningEnabled: true,
      boxSelectionEnabled: false,
      wheelSensitivity: 0.2,
    });
+    cy.layout(defaultLayout).run();

参考