Im working on a Next.js project that requires the use of cytoscapejs. So far I have tried to type document.getElementById('cy') and $('#cy') but none of those work.
import Head from "next/head"
import cytoscape from 'cytoscape';
var cy = cytoscape({
//container: !!??!!
elements: [],
style: [],
layout: {}
});
export default function Grafo1() {
return (
<div>
<Head>
<title>Graph 1.</title>
</Head>
<div id="cy">
//graph here
</div>
</div>
)
}
I have tried a react library called react-cytoscape but thows an error "window is not defined" when I refresh the page becouse nextjs works with ssr and the graph component falls apart when refreshed. Also tried the dynamic module that deactivates ssr but still doesn`t work.
I`d style this somewhere else. Any ideas?