# ReferenceError: navigator is not defined - VideoSDK - NextJS

**URL:** <https://devforum.zoom.us/t/referenceerror-navigator-is-not-defined-videosdk-nextjs/112088>\
**Category:** Video SDK\
**Created:** [June 17, 2024, 6:35pm UTC](https://devforum.zoom.us/t/referenceerror-navigator-is-not-defined-videosdk-nextjs/112088 "2024-06-17T18:35:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Billy117](https://avatars.discourse-cdn.com/v4/letter/b/e99b99/32.png) [@Billy117](https://devforum.zoom.us/u/Billy117)\
**Post date:** [June 17, 2024, 6:35pm UTC](https://devforum.zoom.us/t/referenceerror-navigator-is-not-defined-videosdk-nextjs/112088/1 "2024-06-17T18:35:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [June 18, 2024, 5:54am UTC](https://devforum.zoom.us/t/referenceerror-navigator-is-not-defined-videosdk-nextjs/112088/2 "2024-06-18T05:54:49Z")

</div>

Hey @Billy117

Thanks for your feedback.

> Next.js is a React framework with [pre-rendering](https://nextjs.org/docs/basic-features/pages#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.

> **[How to solve "window is not defined" errors in React and Next.js](https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97)**
>
> Next.js is a React framework with pre-rendering abilities. This means that for every page, Next.js...

Thanks  
Vic