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:
Go to ‘…’
Click on ‘…’
Scroll down to ‘…’
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.
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
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.
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.
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?
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)
"
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.
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:
@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.