Cannot import module in nextjs

Meeting SDK Web
1

I tried to import zoom websdk module to next js but it failed because window object is not defined.

What i did is just trying to import websdk module but this error happened

Imgur

I’m using nextjs v12 with create-next-app and my code is pretty simple. here’s on my pages/index.js

import { ZoomMtg } from '@zoomus/websdk';

const Page = () => {

    const handleClick = async () => {

    }

    return (
        <main>
            {/* get meeting number and role here (and password maybe) */}
            <button onClick={handleClick}>Join meeting</button>
            {/* <div>{meetingUrl && <ZoomWindow url={meetingUrl} />}</div>  */}
        </main>
    )
}

export default Page

is the websdk package broken or something?

2

Keep in Mind that NextJS runs both in the browser and on the server. During a server side render, window is not defined. You can use dynamic imports to only import some dependencies on the browser, where window will be defined.

Here is the example from NextJS

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

You can do essentially the same, but with your dependency.

Edit: I thought ZoomMtg was a component. The first example from the docs is closer to what you need for ZoomMtg.

Something like this should do the trick:

  const [zoomMtg, setZoomMtg] = useState(null)
  useEffect(() => {
   ( async () => {
     if(typeof window !== "undefined"){
      const {ZoomMtg} = (await import('@zoomus/websdk'))
      setZoomMtg(ZoomMtg)
    }
    })()
  }, [])

Then just confirm zoomMtg the state variable is defined before rendering your component. {!!zoomMtg && <YourComponent />

NOTE: If you have control over the YourComponent module, then a better alternative would be to move the import of ZoomMtg to this file and just import it normally. Then import YourComponent with the nextjs dynamic syntax.

1 Like
3

How can I import { ZoomMtg } with Code?

4

Greetings @us7rname7860,

Thank you for posting in the Zoom Developer Forum. You should be able to iimport { ZoomMtg } with Code similar to other modules. Can you share more details regarding the issue you’re having? Are you able to share a screenshot of the error you are encountering along with a snippet of your code?

In the meantime, here is a helpful article for your reference :

Best,
Donte

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.