# ReferenceError: window is not defined

**URL:** <https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604>\
**Category:** Web\
**Created:** [April 2, 2020, 9:03am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604 "2020-04-02T09:03:56Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahparikh](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ahparikh/32/4714_2.png) [@ahparikh](https://devforum.zoom.us/u/ahparikh)\
**Post date:** [April 2, 2020, 9:03am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/1 "2020-04-02T09:03:57Z")

</div>

**Description**  
When I try to integrate import { ZoomMtg } from ‘@zoomus/websdk’; in my next js project. I’m getting window is not defined error. Next js is serverside node react application.

**Error**  
The full error message or issue you are running into.  
ReferenceError: window is not defined at  
node\_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js:2:553

**Which version?**

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

**Screenshots**  
If applicable, add screenshots to help explain your problem.

**Smartphone (please complete the following information):**

- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Version: [e.g. 22]
- Browser:[e.g. Chrome]

**Additional context**  
Add any other context about the problem here.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 3, 2020, 12:20am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/2 "2020-04-03T00:20:15Z")

</div>

Hey @ahparikh,

Can you please share your code so we can debug?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![ahparikh](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ahparikh/32/4714_2.png) [@ahparikh](https://devforum.zoom.us/u/ahparikh)\
**Post date:** [April 3, 2020, 11:11am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/3 "2020-04-03T11:11:30Z")

</div>

Hey @tommy -

I have imported

import { ZoomMtg } from ‘@zoomus/websdk’;  
console.log(‘checkSystemRequirements’);  
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

Please find [https://github.com/arpithparikh/hello-next](https://github.com/arpithparikh/hello-next) repo - this is samle code within next js application.  
where I have added all dependencies in package.json and to run project please try npm run dev.

Error :  
window is not defined  
ReferenceError: window is not defined

Let me know if you need more details…

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 3, 2020, 8:09pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/4 "2020-04-03T20:09:49Z")

</div>

Hey @ahparikh, please see the status of the WebSDK:

We are working to get the [Zoom Web Client](https://support.zoom.us/hc/en-us/articles/214629443-Zoom-web-client) and [Zoom Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/web) back online. Please keep up with our status page for detailed updates: [status.zoom.us](http://status.zoom.us/)

> [@Developer impacting changes during COVID-19](https://devforum.zoom.us/t/developer-impacting-changes-during-covid-19/8930):
>
> [Developer impacting changes during COVID-19](https://devforum.zoom.us/t/developer-impacting-changes-during-covid-19/8930)Zoom Developer Documentation Survey Please take a few minutes to fill out the [Zoom Developer Docs survey](https://forms.gle/mHCNSZuWfsNDcyMc8) and let us know how we can assist you better with our docs. Your input will be invaluable in improving our documentation. Delayed responses by Zoom staff on developer forum due to volume of posts. Expect a reply in 24 hours on weekdays. What does this mean? During these tough times, we are seeing a massive increase in demand for our services. To …

* * *

The best workaround is to use the Zoom Desktop / Mobile app.

Just include the Zoom meeting join url (`https://zoom.us/j/meetingID`) on your site rather than showing the websdk / iframe. Clicking on the join url will open the Zoom meeting in the Zoom app.

And the note from the Manager of Developer Relations at Zoom.

> [@\[Resolved with 1.7.4+\] Web SDK / Web Client from browser: 403 Forbidden](https://devforum.zoom.us/t/webinar-from-browser-403-forbidden/10782/58):
>
> Hello everyone, Let me be the first to say we understand what kind of stress this is adding to your lives. For that, we can only offer our apologies and assurances that we are hard at work bringing up these services. It is a top priority for us. As you can imagine, we don’t want to provide false hope, and at the moment, we just don’t have enough information to share an accurate timeline. Senior leadership and I are closely monitoring this and will update the status page as we know more. I ap…

Apologies for the inconvenience,  
Tommy

---

<div class="post-metadata">

**Author:** ![anmol](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/anmol/32/2964_2.png) [@anmol](https://devforum.zoom.us/u/anmol)\
**Post date:** [April 23, 2020, 6:24pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/5 "2020-04-23T18:24:40Z")

</div>

Hi Tommy,  
I am also facing a similiar issue on a react + nextjs app. Any updates on the issue ?

Regards  
Anmol

---

<div class="post-metadata">

**Author:** ![anmol](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/anmol/32/2964_2.png) [@anmol](https://devforum.zoom.us/u/anmol)\
**Post date:** [April 24, 2020, 10:41am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/6 "2020-04-24T10:41:14Z")

</div>

I found the solution. Just await your import of the sdk file inside the compnentDidMount function or use dynamic import ssr false vis next/dynamic.

After this just make sure that everything needed by the sdk is exposed globally.

But **I would recommend** simply appending the necessary scripts inside your index.js and then accessing the ZoomMtg object via global.ZoomMtg as it is a much better / simpler option.

scripts :

```
		<link
			type="text/css"
			rel="stylesheet"
			href="https://source.zoom.us/1.7.5/css/bootstrap.css"
		/>
		<link
			type="text/css"
			rel="stylesheet"
			href="https://source.zoom.us/1.7.5/css/react-select.css"
		/>
		<script src="https://source.zoom.us/1.7.5/lib/vendor/react.min.js" />
		<script src="https://source.zoom.us/1.7.5/lib/vendor/react-dom.min.js" />
		<script src="https://source.zoom.us/1.7.5/lib/vendor/redux.min.js" />
		<script src="https://source.zoom.us/1.7.5/lib/vendor/redux-thunk.min.js" />
		<script src="https://source.zoom.us/1.7.5/lib/vendor/jquery.min.js" />
		<script src="https://source.zoom.us/1.7.5/lib/vendor/lodash.min.js" />
		<script src="https://source.zoom.us/zoom-meeting-1.7.5.min.js" />
```

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 27, 2020, 8:28pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/7 "2020-04-27T20:28:00Z")

</div>

Thanks for sharing your solution @anmol! 🙂

-Tommy

---

<div class="post-metadata">

**Author:** ![Milo](https://avatars.discourse-cdn.com/v4/letter/m/85e7bf/32.png) [@Milo](https://devforum.zoom.us/u/Milo)\
**Post date:** [May 19, 2020, 9:37pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/8 "2020-05-19T21:37:58Z")

</div>

I’m relatively new to Node and I’m running into this same problem. I’ve installed and have the sample-app-web running. I’m trying to bring the websdk into a new project to start working with it and immediately run into this problem. Can you expand on your response with specifics to help a beginner work around this issue?

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 22, 2020, 9:59pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/9 "2020-05-22T21:59:25Z")

</div>

Hey @Milo,

Make sure you have all the required Web SDK scripts:

CDN:

> **[Integrate SDK - Getting Started - Web - Native SDKs - Zoom Software...](https://marketplace.zoom.us/docs/sdk/native-sdks/web/getting-started/integrate#cdn)**
>
> Integrate SDK
> 
> The Web SDK can be imported locally into an existing Node.js app through an npm package, or into any HTML5 project through a CDN (content...

Local:

> **[@zoomus/websdk](https://www.npmjs.com/package/@zoomus/websdk#usage)**
>
> Zoom Web SDK

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![main](https://avatars.discourse-cdn.com/v4/letter/m/e36b37/32.png) [@main](https://devforum.zoom.us/u/main)\
**Post date:** [July 23, 2020, 3:32pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/10 "2020-07-23T15:32:47Z")

</div>

hello, have you found solution to it???

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 24, 2020, 7:17pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/11 "2020-07-24T19:17:19Z")

</div>

Hey @main,

Please share your specific issue and steps to reproduce so we can assist.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![dhawalgowda56](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dhawalgowda56/32/14799_2.png) [@dhawalgowda56](https://devforum.zoom.us/u/dhawalgowda56)\
**Post date:** [October 16, 2020, 9:53am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/12 "2020-10-16T09:53:01Z")

</div>

can you please share the code

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [October 19, 2020, 11:00pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/13 "2020-10-19T23:00:27Z")

</div>

Hey @dhawalgowda56,

Are you experiencing the same issue? Happy to help if you provide some more details. 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![Emerald](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/emerald/32/28227_2.png) [@Emerald](https://devforum.zoom.us/u/Emerald)\
**Post date:** [June 14, 2021, 12:06pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/15 "2021-06-14T12:06:41Z")

</div>

Please am also having this issues and i have tried every possible solution but ain’t working.  
"  
UnhandledPromiseRejectionWarning: ReferenceError: window is not defined  
at Object. (C:\kokofp-newly-updated\node\_modules@zoomus\websdk\dist\zoomus-websdk.umd.min.js:2:504)  
"

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [June 16, 2021, 12:41am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/16 "2021-06-16T00:41:58Z")

</div>

Hey @Emerald,

Thank you for reaching out to the Zoom Developer Forum. Please submit a new forum topic so we can focus on solving this issue there.

In that topic, please let us know if you’re seeing this same behavior with the [Sample Web App](https://github.com/zoom/sample-app-web) and what version of the [Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/web#zoom-web-sdk) you’re using.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![abhishekkr1993](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/abhishekkr1993/32/4227_2.png) [@abhishekkr1993](https://devforum.zoom.us/u/abhishekkr1993)\
**Post date:** [July 2, 2021, 11:30am UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/17 "2021-07-02T11:30:04Z")

</div>

I am also getting the same issue. I have two projects, one is in gatsby and the second one is in next/js. In the gatsby project, I’m integrating the zoom with the host feature whereas, in the next/js project, I’m integrating it as normal user. In my localhost, its working fine but when I try to build and deploy in the production, it throws the error in both project:

**error “window” is not available during server side rendering.**

I have written the js as a functional component. Any help would be very useful.

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [July 7, 2021, 6:59pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/18 "2021-07-07T18:59:50Z")

</div>

Hey @abhishekkr1993,

This seems to be related to how Gatsby operates when using SSR rather than an issue with the Web SDK. I’m not familiar enough with Gatsby to know the next steps here but I’m hoping the following issue helps:

> <https://github.com/gatsbyjs/gatsby/issues/5835>
>
> \## Description
> 
> I want to trigger window width to change the content of my web…site. But I don't know how to fix my issue.
> Webpack error : window is not defined at production build
> 
> \### Expected result
> 
> Production build successful.
> 
> \### Actual result
> 
> \`\`\`
> import React, { Component } from 'react'
> import PropTypes from 'prop-types'
> import { Helmet } from 'react-helmet'
> import Link from 'gatsby-link'
> import 'flexboxgrid/dist/flexboxgrid.min.css';
> import { Footer, Header } from '../components/organisms'
> import { Modal, Project } from '../components/molecules'
> 
> import '../scss/main.scss'
> 
> class Index extends Component {
> 
> constructor(props) {
> super(props)
> this.state = {
> width: window.innerWidth,
> };
> }
> componentDidMount() {
> const width = typeof window !== 'undefined' && window
> }
> 
> componentWillMount() {
> window.addEventListener('resize', this.handleWindowSizeChange);
> }
> 
> // make sure to remove the listener
> // when the component is not mounted anymore
> componentWillUnmount() {
> window.removeEventListener('resize', this.handleWindowSizeChange);
> }
> 
> handleWindowSizeChange = () =\> {
> this.setState({ width: window.innerWidth });
> };
>   
> render(){
> const { width } = this.state;
> const isMobile = width \<= 600;
> console.log(width, ' px')
> const {data} = this.props;
> 
> return(
> \<div className="wrapper"\>
>       
> \<div className="wrapper\_\_top"\>
> \<Helmet\>
> \<html lang="fr" /\>
> \<meta charSet="utf-8" /\>
> \<meta httpEquiv="X-UA-Compatible" content="IE-edge,chrome=1" /\>
> \<meta name="viewport" content="width=device-width,initial-scale=1" /\>
> \<link rel="icon" type="image/png" href="/favicon.png" /\>
> \</Helmet\>
> \<Header /\>
> \<main\>
> {/\* Affichage du Teaser pour les navigateurs qui ont une largeur supérieure ou égale à 600px \*/}
> {
> (isMobile && this.props.location.pathname === '/') ? 
> \<div\>
> {data.allProjectsJson.edges.map(({ node }, i) =\>
> (\<Project
> key={i}
> title={node.title}
> category={node.category}
> image={{
> src: node.image.childImageSharp.original.src,
> alt: node.title,
> }}
> logo={{
> src: node.logo.childImageSharp.original.src,
> alt: node.title,
> }}
> website={node.website}
> \>
> \<p dangerouslySetInnerHTML={{ \_\_html: node.description }} /\>
> \</Project\>),
> )}
> \</div\> 
> : this.props.children()
> }
> 
> \</main\>
> \<Footer /\>
> \</div\>
>        
>         
>         
>         
> \</div \>
> )
> }
> }
> Index.propTypes = {
> children: PropTypes.func.isRequired,
> location: PropTypes.shape({
> pathname: PropTypes.string,
> }).isRequired,
> data: PropTypes.object.isRequired
> };
> export default Index;
> export const getSiteHeader = (siteTitle, description) =\>
> (\<Helmet\>
> \<title\>{\`${siteTitle} | Maral Sabbagh\`}\</title\>
> \<meta name="description" content={description} /\>
> \</Helmet\>);
> 
>   
> //eslint-disable-next-line no-undef
> export const pageQuery = graphql \`
> query LayoutQuery {
> 
> allProjectsJson {
> edges {
> node {
> title
> category
> description
> image {
> childImageSharp {
> original {
> src
> }
> }
> }
> logo {
> childImageSharp {
> original {
> src
> }
> }
> }
> website
> }
> }
> }
> allGeneralJson(filter: {url: {eq: "/projets"}}){
> edges{
> node{
> url
> pageTitle
> metaDesc
> metaTitle
>         
> 
> }
> }
> }
> }
> \`;
> 
> 
> \`\`\`
> 
> \### Environment
> 
> \`\`\`
> gatsby info --clipboard
> module.js:549
> throw err;
> ^
> 
> Error: Cannot find module 'regenerator-runtime/runtime'
> at Function.Module.\_resolveFilename (module.js:547:15)
> at Function.Module.\_load (module.js:474:25)
> at Module.require (module.js:596:17)
> at require (internal/module.js:11:18)
> at Object.\<anonymous\> (C:\\Users\\Maral Sabbagh\\AppData\\Roaming\\npm\\node\_modules\\gatsby-cli\\lib\\index.js:88:1)
> at Module.\_compile (module.js:652:30)
> at Object.Module.\_extensions..js (module.js:663:10)
> at Module.load (module.js:565:32)
> at tryModuleLoad (module.js:505:12)
> at Function.Module.\_load (module.js:497:3)
> 
> \`\`\`
> Thanks for your help

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![janaroy21](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/janaroy21/32/37841_2.png) [@janaroy21](https://devforum.zoom.us/u/janaroy21)\
**Post date:** [May 19, 2022, 4:02pm UTC](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/19 "2022-05-19T16:02:19Z")

</div>

@ahparikh@abhishekkr1993  
If you are developing the app using NextJS with SSR all the javascript will render at the server side. That is the main issue for you. Some of the ZoomSDK function need the client side render to access "window, sessionStorage and more… “. In this situation you will get this “window is not defined” all the time.  
In NextJS, there is a solution for this issue, You can render a component using " Dynamic Import” method.

```auto
import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

```

Using this “Dynamic Import”, you can import your child component that can render at client side.

For more info

> **[ReferenceError: window is not defined in NextJS](https://crawlee.space/d/79-referenceerror-window-is-not-defined-in-nextjs)**
>
> I ’ve created a React Component , that can fetch the session storage data and load in to the front-end. But I’m getting the error when I run this code let c...

> **[Advanced Features: Dynamic Import | Next.js](https://nextjs.org/docs/advanced-features/dynamic-import)**
>
> Dynamically import JavaScript modules and React Components and split your code into manageable chunks.