NextJS | Web Meeting SDK | Component View - ReferenceError: window is not defined

[pranshu.midha (Pranshu)]

Description
I am trying to integrate Zoom Web Meeting SDK - Component View into my NextJS application but getting the error mentioned above.
I’ve tried a couple of workarounds like Dynamic Import with no SSR and creating the client inside useEffect(componentDidMount) as mentioned in the solution here. But it is not working.

Browser Console Error
index.js?46cb:323 Uncaught at Object. (file:///Users/pranshu1995/Desktop/Projects/memo-rehab-frontend/node_modules/@zoomus/websdk/dist/zoomus-websdk-embedded.umd.min.js:2:333)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object. (file:///Users/pranshu1995/Desktop/Projects/memo-rehab-frontend/node_modules/@zoomus/websdk/embedded.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1101:10)

Which Web Meeting SDK version?
2.2.0

Meeting SDK Code Snippets
import ZoomMtgEmbedded from ‘@zoomus/websdk/embedded’;
const client = ZoomMtgEmbedded.createClient();

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

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

Screenshots

Device (please complete the following information):

• Device: Macbook Air
• OS: Catalina 10.15.7
• Browser: Chrome
• Browser Version 98.0.4758.80

Additional context
Add any other context about the problem here.

[mikew (Michael)]

I have never used Zoom with NextJS before, but do have quite a bit of experience with NextJS. Where in your code are you calling ZoomMtgEmbedded.createClient()?

[pranshu.midha (Pranshu)]

I found a solution for this. I had to load the scripts via CDN rather than import via npm.

import React, {useState, useEffect, useRef} from "react";
import Script from 'next/script'

const Page = () => {
const zoomRef = useRef(null);

useEffect(() => { // Or componentDidMount

        const client = ZoomMtgEmbedded.createClient()

        client.init({
            debug: true,
            zoomAppRoot: zoomRef.current,
            language: 'en-US',
            customize: {
              meetingInfo: [
                'topic',
                'host',
                'mn',
                'pwd',
                'telPwd',
                'invite',
                'participant',
                'dc',
                'enctype',
              ],
              toolbar: {
                buttons: [
                  {
                    text: 'Custom Button',
                    className: 'CustomButton',
                    onClick: () => {
                      console.log('custom button');
                    },
                  },
                ],
              },
            },
          });

          client.join({
            apiKey: yourKey,
            signature: yourSignature,
            meetingNumber: yourMeet,
            password: yourPass,
            userName: yourName
        })
    }, [])

return(
        <>
           <link
          type="text/css"
          rel="stylesheet"
          href="https://source.zoom.us/2.2.0/css/bootstrap.css"
        /> 
        <link
          type="text/css"
          rel="stylesheet"
          href="https://source.zoom.us/2.2.0/css/react-select.css"
        />

        <Script src="https://source.zoom.us/2.2.0/lib/vendor/react.min.js" strategy="beforeInteractive" /> 
      <Script src="https://source.zoom.us/2.2.0/lib/vendor/react-dom.min.js" strategy="beforeInteractive" />
      <Script src="https://source.zoom.us/2.2.0/lib/vendor/redux.min.js" strategy="beforeInteractive" />
      <Script src="https://source.zoom.us/2.2.0/lib/vendor/redux-thunk.min.js" strategy="beforeInteractive" />
      <Script src="https://source.zoom.us/2.2.0/lib/vendor/lodash.min.js" strategy="beforeInteractive" />
       <Script src="https://source.zoom.us/2.2.0/zoom-meeting-embedded-2.2.0.min.js" strategy="beforeInteractive" />

<div id="”meetingSDKElement”" ref={zoomRef}>

</>
}

export default Page;

[donte.zoom (Donte)]

Hi, @pranshu.midha,

Phenomenal! Glad you were able to resolve that issue, and many thanks for sharing your solution here. It will be of great benefit to fellow community members!

Warmly,
Donte