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

Meeting SDK Web
3

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;