Cannot read properties of null (reading 'isHeadless') while using cytoscape's layout extensions

Question

I was trying to use "cose-bilkent" layout extension in my react app, when the layout name was changed to "cose-bilkent" from inbuilt "grid" , it throws an error saying

"Cannot read properties of null (reading 'isHeadless')"

Since I am running this on an online code editor, headless shall be false as stated by the document:

To explicitly run a headless instance (e.g. in the browser) you can specify options.headless as true.

So I tried giving "headless:false" explicitly yet I am still getting the same error. I also tried other libraries such as spread, cola to cross check it , I am getting the same console error when I run it.

When navigated to the Line number of cytoscape.cjs.js 18789.35 it has the the following similar code

headless : function () : this.__privateRenderer.isHeadless()

    import "./styles.css";
import { useRef, useEffect } from "react";
import cytoscape from "cytoscape";
import COSEBilkent from "cytoscape-cose-bilkent";
import cola from "cytoscape-cola";
import spread from "cytoscape-spread";
import CytoscapeComponent from "react-cytoscapejs";
import Cytoscape from "cytoscape";

Cytoscape.use(cola);

export default function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const config = {
      container: containerRef.current,
      layout: {
        name: "cola"
      },
      zoom: 1,

      elements: {
        nodes: [
          { data: { id: "1", label: "IP 1", type: "ip" } },
          { data: { id: "2", label: "Device 1", type: "device" } },
          { data: { id: "3", label: "IP 2", type: "ip" } },
          { data: { id: "4", label: "Device 2", type: "device" } },
          { data: { id: "5", label: "Device 3", type: "device" } },
          { data: { id: "6", label: "IP 3", type: "ip" } },
          { data: { id: "7", label: "Device 5", type: "device" } },
          { data: { id: "8", label: "Device 6", type: "device" } },
          { data: { id: "9", label: "Device 7", type: "device" } },
          { data: { id: "10", label: "Device 8", type: "device" } },
          { data: { id: "11", label: "Device 9", type: "device" } },
          { data: { id: "12", label: "IP 3", type: "ip" } },
          { data: { id: "13", label: "Device 10", type: "device" } }
        ],
        edges: [
          {
            data: { source: "1", target: "2", label: "Node2" }
          },
          {
            data: { source: "3", target: "4", label: "Node4" }
          },
          {
            data: { source: "3", target: "5", label: "Node5" }
          },
          {
            data: { source: "6", target: "5", label: " 6 -> 5" }
          },
          {
            data: { source: "6", target: "7", label: " 6 -> 7" }
          },
          {
            data: { source: "6", target: "8", label: " 6 -> 8" }
          },
          {
            data: { source: "6", target: "9", label: " 6 -> 9" }
          },
          {
            data: { source: "3", target: "13", label: " 3 -> 13" }
          }
        ]
      },

      pannable: true,
      position: {
        // the model position of the node (optional on init, mandatory after)
        x: 600,
        y: 100
      },
      style: [
        // the stylesheet for the graph
        {
          selector: "node",
          style: {
            "text-valign": "center",
            "background-color": "#9D2F2E",
            label: "data(id)"
          }
        },

        {
          selector: "edge",
          style: {
            width: 6,
            "line-color": "#ccc",
            "target-arrow-color": "#dfr",
            "target-arrow-shape": "triangle",
            "curve-style": "bezier",
            label: "data(label)"
          }
        }
      ]
    };

    cytoscape(config);
      }, []);
    
      return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
    }

Above is the code that I am running.

Please drop in any inputs you have or any word on if I am going wrong somewhere.

Thanks in advance!

Answer 1

If you still unresolved this problem. Try rewriting below code.

const cy = cytoscape(config)

cy.layout({
  name: 'cola'
}).run()

Then, remove or change this your code.

layout: {
  name: "cola"
},

You need to setting other layout options(ex. random, concentric...) https://js.cytoscape.org/#layouts

reference(about layout.run)

Note that you must call layout.run() in order for it to affect the graph.

https://js.cytoscape.org/#layout.run