How to setup Neovis in Reactjs

[Roushan-Raj-au9]

import NeoVis, { NEOVIS_ADVANCED_CONFIG } from 'neovis.js';
import { useEffect } from "react";

function App() {

  useEffect(() => {
    let neoViz;

    function draw() {
      const config = {
        containerId: "viz",
        neo4j: {
          serverUrl: "bolt://localhost:7687",
          serverUser: "neo4j",
          serverPassword: "neo4j",
        },
        labels: {
          Character: {
            label: "name",
            value: "pagerank",
            group: "community",
            [NEOVIS_ADVANCED_CONFIG]: {
              static: {
                font: '18px',
                shape: 'box',
                color: '#00ff00'
              }
            }
          }
        },
        relationships: {
          INTERACTS: {
            value: "weight"
          }
        },
         initialCypher: "MATCH (n) RETURN n limit 20"   // here I'm trying to use default Movie DBMS 
      };

      neoViz = new NeoVis.default(config);
      neoViz.render();
      console.log("neoViz >> ", neoViz);
    }

    draw();
  }, [])

  return (
    <div className="App">
      Hello
      <div id="viz"></div>
    </div>
  );
}

export default App;

After running this I'm getting an error as -> Uncaught TypeError: neovis_jsWEBPACK_IMPORTED_MODULE0default(...).default is not a constructor at draw

Can you help me to correctly setup neovis in Reactjs

[thebestnom]

Change new NeoVis.default( to new NeoVis( You are already imporint NeoVis as default, the examples written like it was imported as import * as NeoVis

[Roushan-Raj-au9]

Thank you that resolved the particular problem But now I cannot see the arrows, labels ,name , how to bring that attaching below the image how currently it is looking for reference

[Roushan-Raj-au9]

I want to display something like below image

[NeoZ666]

Put the correct query

[NeoZ666]

initialCypher: MATCH (n) RETURN n limit 20

This is incorrect. Use something like:

initialCypher: MATCH p=()-[:ACTED_IN]->() RETURN p to get all nodes which have 'to' and 'from' relationship of 'ACTED_IN'