Next.js Discord

Discord Forum

window is not defined with everything working fine

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Running in dev rn the website runs fine but I get a window is not defined error. This error is preventing me from building though.

34 Replies

Masai LionOP
Heres a link to the code of the file
Most of it is react-three-fiber stuff
@Masai Lion https://hastebin.com/share/inisejisup.javascript
Southern rough shrimp
Where u using window
@Southern rough shrimp Where u using window
Masai LionOP
idk
Southern rough shrimp
Huh?
Its ur code
Masai LionOP
the closest i can think of is near the bototm
with canvas
but i supposedly fixed that
return (
        <Canvas
            gl={{ antialias: true, toneMapping: NoToneMapping }}
            size={{ width: window.innerWidth, height: window.innerHeight }}
            resize={{scroll: false}}
        >


            <ambientLight intensity={0.01} color={0xbbbbbb}/>
            <fog attach={'fog'} color={0x535ef3} near={1} far={2000}/>
            <directionalLight color={0xffffff} intensity={0.5} position={[-800, 1500, 300]}/>
            <directionalLight color={0x7982f6} intensity={0.8} position={[-300, 400, 50]}/>
            <spotLight color={'802959'} intensity={0.8} position={[50, 500, -40]} angle={0.5}/>
            <directionalLight color={'#bff7ff'} intensity={3} position={[-300, 400, -300]}/>
            <directionalLight color={'#bff7ff'} intensity={2} position={[-300, 400, -150]}/>
            <directionalLight color={'#bff7ff'} intensity={50} position={[-250, 250, -450]}/>
            <directionalLight color={'#bff7ff'} intensity={50} position={[-270, 0, -470]}/>
            <directionalLight color={'#bff7ff'} intensity={50} position={[0, 250, -500]}/>
            <pointLight color={0x8566cc} intensity={0.8} position={[-200, 500, 450]}/>
            <CameraPosition/>
            <GlobeObj/>


        </Canvas>
    );
Do
Masai LionOP
i changed it to this 
const canvasWidth = typeof window !== 'undefined' ? window.innerWidth : 800;
    const canvasHeight = typeof window !== 'undefined' ? window.innerHeight : 600;

    return (
        <Canvas
            gl={{ antialias: true, toneMapping: NoToneMapping }}
            size={{ width: canvasWidth, height: canvasHeight }}
            resize={{scroll: false}}
        >
Southern rough shrimp
If ( typeof window==“undefined”)
//do nothing
Else (
Set width to usestate

)
And then use state
@Southern rough shrimp If ( typeof window==“undefined”) //do nothing Else ( Set width to usestate )
Masai LionOP
this is the same thing as the second code block i sent right
wait
Southern rough shrimp
Yea
God
Good
Masai LionOP
wdym width to usestate
@Southern rough shrimp If ( typeof window==“undefined”) //do nothing Else ( Set width to usestate )
Masai LionOP
do you just wrap the width inside useeffect?
ok wait
i know its not that part of hte code
im cojmmenting stuff out
its part of the absolute spaghetti mess i made with react three fiber
@Southern rough shrimp im getting the error
from
extend({ThreeGlobe})
Southern rough shrimp
Idk i dont use three fiber
Probably check google for this error
Masai LionOP
alright
@Masai Lion alright
Southern rough shrimp
I am@not sure but extends are used in class components and ur using functional components