Window is not defined in nextjs

[bytesagar]

I was trying to integrate the react-jutsu in nextjs app, its throwing me window is not defined error.

import { useJitsi } from 'react-jutsu'
export default function videoCall(){
    const jitsiConfig = {
        roomName: 'konoha',
        displayName: 'Naruto Uzumaki',
        password: 'dattebayo',
        subject: 'fan',
        parentNode: 'jitsi-container',
      };
      const { loading, error, jitsi } = useJitsi(jitsiConfig);
    
      return (
        <div>
          {error && <p>{error}</p>}
          <div id={jitsiConfig.parentNode} />
        </div>
      );
}

[this-fifo]

hey @bytesagar I think the reason might be that you are attempting to invoke jitsi before the client side is available.

Since nextjs has server side rendering capabilities there is a lifecycle in which the window property won't exist, make sure you move your code inside to when the window is available.

Usually that is inside componentDidMount() or useEffect()

Alternatively, I'd suggest looking at importing modules without SSR into Nextjs for this use case

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr