vis-network-react

vis-network-react copied to clipboard

I'm getting this error and I'm not sure why

error: Uncaught TypeError: Cannot read properties of null (reading 'hasChildNodes') at t.value (Canvas.js:227:1) at new XC (Network.js:138:1) at spawnNodes (Graph.js:44:1) at Graph (Graph.js:60:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1)

my code: import React, { useEffect } from 'react'; import {useDispatch, useSelector} from 'react-redux' import { Network } from "vis-network"; import {DataSet} from "vis-data"; // import data from "../../data/vis.json";

`function Graph () { const dispatch = useDispatch();

const visData = useSelector((state) => {
    return state.visData
})

const spawnNodes = () => {   
    if(visData){
        // console.log(data)
        let nodes = []

        nodes = new DataSet(visData["nodes"])

        let edges = new DataSet(visData["edges"])

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
            nodes: nodes,
            edges: edges,
        };
        var options = {
            nodes: {
                shape: "dot",
                size: 30,
                font: {
                size: 32,
                color: "#ffffff",
                },
                borderWidth: 2,
            },
            edges: {
                width: 2,
                arrows: "to",
            },
            physics: false
        };
        var network = new Network(container, data, options); <-- highlighted error
        dispatch({type: "INIT_NETWORK", payload: network})
        dispatch({type: "NODES_DATASET", payload: nodes})
        dispatch({type: "INIT_NODE_OPTIONS", payload: network.body.nodes})

        network.on("click", (prop) => {
            let ids = prop.nodes;
            let clickedNodes = nodes.get(ids)
            // console.log('clicked nodes:', clickedNodes[0]);
            dispatch({type: "SELECT_NODE", payload: clickedNodes[0]})
        })
    }
    
}

// useEffect(() => {
//     spawnNodes(data)
// })

return (
    <div id="mynetwork"> <-- highlighted error
        {spawnNodes()}
    </div>
);

} export default Graph; `

When I hover over Network, it says (alias) new Network(container: HTMLElement, data: Data, options?: Options | undefined): Network import Network

Try moving spawnNodes() outside of mynetwork? i.e. after the </div>