ReferenceError: window is not defined

Web SDK
#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" />
1 Like
#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