ReferenceError: navigator is not defined - VideoSDK - NextJS

Video SDK
1

NextJS version 13.5.2
Zoom Video SDK: 1.10.7

When importing the zoom video with the following: import ZoomVideo from '@zoom/videosdk'; I am getting the error ReferenceError: navigator is not defined

Looking online it says something about react loading the zoom sdk before window is initialized and this makes it throws the error.

I can load the SDK with the following: const { default: ZoomVideo } = await import('@zoom/videosdk'); within a useEffect.

The problem is I do not want to have to load the ZoomSDK in a useEffect in every component I make. Some functions I want to live outside of a useEffect, where only the ZoomSDK is defined.

One solution I found was creating all the function definitions outside the useEffect then updating them after the ZoomSDK loads in the useEffect. Seems iffy to me though. Would rather a simpler solution.

Has anyone ran into this before?

Thanks

2

Hey @Billy117

Thanks for your feedback.

Next.js is a React framework with pre-rendering abilities. This means that for every page, Next.js will try to generate the HTML of the page for better SEO and performance.

This is why such as window or navigator cannot be directly used in Next.js.

Video SDK Web is designed to be used in a browser context, so it’s better to wrap it within useEffect() method or add isBrowser condition.

Here is an article that might give you some thoughts on this issue.

Thanks
Vic