ReferenceError: window is not defined

[robylosa94]

I'm working with nextjs and threejs.
My configuration is:

import * as dat from "dat.gui";
const gui= new dat.GUI();
gui.add(settings, "colorful");
gui.add(settings, "zoom");
gui.add(settings, "random");

[bastienrobert]

@robylosa94 Thanks for this contribution. Could you please explain how you fixed it or add a reference to a resolved issue?

[user28111999]

I would like to know this as well. I'm running ThreeJS with NextJS and React

[sean6bucks]

@bastienrobert @19992077
Ran into this as well, solved it for now by just using a dynamic import where my three.js script is being run, and since I am not running the three.js logic until I am on client-side anyway (triggered via a useEffect) I know that the window will be available.

const init = async () => {
   const dat = await import('dat.gui')
   const gui = new dat.GUI()
   // ... rest of the three.js code
}

...

const CanvasComponent = (props) => {
  useEffect(() => {
    init()
  }, [])

  return (
    <canvas id="webgl" />
  )
}

Additionally found that dat.GUI does not work well with Fast Refresh, and doesn't know to not keep adding new menus, but thats another issue.

[kimbaudi]

Additionally found that dat.GUI does not work well with Fast Refresh, and doesn't know to not keep adding new menus

To fix this issue, move gui variable declaration out of init() and useEffect(). Then check whether gui exists before instantiating dat.gui.

const CanvasComponent = (props) => {
   let gui;

   const init = async () => {
      const dat = await import('dat.gui')
      if (!gui) {
         gui = new dat.GUI()
         // ... rest of the three.js code
      }
   }
   useEffect(() => {
      init()
   }, [])

  return (
    <canvas id="webgl" />
  )
}