ReferenceError: window is not defined

Meeting SDK Web
1

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.

2

Hey @ahparikh,

Can you please share your code so we can debug?

Thanks,
Tommy

3

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 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…

4

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

We are working to get the Zoom Web Client and Zoom Web SDK back online. Please keep up with our status page for detailed updates: status.zoom.us

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.

Apologies for the inconvenience,
Tommy

5

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

Regards
Anmol

6

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" />
2 Likes
7

Thanks for sharing your solution @anmol! :slight_smile:

-Tommy

8

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?

9

Hey @Milo,

Make sure you have all the required Web SDK scripts:

CDN:

Local:

Thanks,
Tommy

10

hello, have you found solution to it???

11

Hey @main,

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

Thanks,
Tommy

12

can you please share the code

13

Hey @dhawalgowda56,

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

Thanks,
Tommy

15

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)
"

16

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 and what version of the Web SDK you’re using.

Thanks,
Max

17

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.

18

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:

Thanks,
Max

19

@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.

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