ReferenceError: window is not defined

[mooijtech]

Hello,

I'm using NextJS and was getting:

ReferenceError: window is not defined

I solved this by using a dynamic import for the Sigma container:

import dynamic from "next/dynamic";

const SigmaContainer = dynamic(import("react-sigma-v2").then(mod => mod.SigmaContainer), {ssr: false})

Maybe it would be a good idea to add this to the documentation for people using NextJS?

[mooijtech]

Actually this didn't solve the issue, I'm still getting this with NextJS.

[sim51]

NextJS do server side rendering, so yes window is not defined, and Sigma this lib are using it for some features. I don't know how it can be solved... This more linked to NextJS than to this lib.

If you find a way to let it works with NextJs, please share the detail, and I will do a doc about that !

[sim51]

Perhaps that using the dynamic import with the check that if the cod eis running on server/client side will work :

const isBrowser = () => typeof window !== "undefined"
if(isBrowser) { 
   const SigmaContainer = dynamic(import("react-sigma-v2").then(mod => mod.SigmaContainer))
  ...

[mooijtech]

I added my graph (useSigma and addNode etc) to client side as well:

const SigmaContainer = dynamic(import("react-sigma-v2").then(mod => mod.SigmaContainer), {ssr: false})
const NetworkGraph = dynamic(import("../components/graph").then(mod => mod.NetworkGraph), {ssr: false})

<SigmaContainer>
     <NetworkGraph/>
</SigmaContainer>

But I'm now getting the following error:

Error: Sigma: container has no height.

Call Stack
Sigma.prototype.resize
node_modules/sigma/sigma.js (986:0)
Sigma
node_modules/sigma/sigma.js (168:0)
SigmaContainer/<
node_modules/react-sigma-v2/lib/esm/SigmaContainer.js (24:0)

Any idea how to solve this?

[mooijtech]

I added the CSS:

import "react-sigma-v2/lib/react-sigma-v2.css";

But I'm still getting:

Error: Sigma: container has no height.

[sim51]

The div that contains sigma (ie. the <div class="sigma-container">) must have a height. Normally the CSS in the lib put it at 100% of the parent container.

Can you try this : <SigmaContainer style={{height: "500px"}}> ?

[mooijtech]

I tried it with

<SigmaContainer style={{ height: "50%", width: "50%"}}/>

But your version works! The CSS isn't making it the parent container's height and width for some reason. No worries.

Thanks for your quick response I highly appreciate it.

Maybe an idea to reference this issue for people wanting to use NextJS with this library.

Kind regards, Marten Mooij

[sim51]

I'm glad that it finally works ! Yes I need to improve the documentation, like for example that you needs to defined a size (width & height) on your container. And to create a section about NextJS easy from what I understood, it's just the dynamic loading when you are in the browser, right ?

[sim51]

FYI: https://github.com/sim51/react-sigma-v2#faq