# Cannot import module in nextjs

**URL:** <https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974>\
**Category:** Web\
**Created:** [December 29, 2021, 6:47am UTC](https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974 "2021-12-29T06:47:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![wahabriaz73f](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/wahabriaz73f/32/33654_2.png) [@wahabriaz73f](https://devforum.zoom.us/u/wahabriaz73f)\
**Post date:** [December 29, 2021, 6:47am UTC](https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974/1 "2021-12-29T06:47:58Z")

</div>

[I](https://jbbatteryfrance.com/) 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](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/0/7/07922c6f628f890e340c308ea026d722b3fef7a4.png "imgur.com") ](https://imgur.com/7rC84Mz)

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![azizusman868](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/azizusman868/32/33658_2.png) [@azizusman868](https://devforum.zoom.us/u/azizusman868)\
**Post date:** [December 29, 2021, 8:38am UTC](https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974/2 "2021-12-29T08:38:30Z")

</div>

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.

> **[Advanced Features: Dynamic Import | Next.js](https://nextjs.org/docs/advanced-features/dynamic-import)**
>
> Dynamically import JavaScript modules and React Components and split your code into manageable chunks.

Here is the example from `NextJS`

```auto
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:

```auto
  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: [I](https://www.jbbatterygermany.com/)f 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.

---

<div class="post-metadata">

**Author:** ![us7rname7860](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/us7rname7860/32/33665_2.png) [@us7rname7860](https://devforum.zoom.us/u/us7rname7860)\
**Post date:** [December 29, 2021, 11:22am UTC](https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974/3 "2021-12-29T11:22:09Z")

</div>

How can I import { ZoomMtg } with Code?

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [January 4, 2022, 12:48am UTC](https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974/4 "2022-01-04T00:48:04Z")

</div>

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 :

> **[Getting started with Node.js modules: require, exports, imports and beyond](https://adrianmejia.com/getting-started-with-node-js-modules-require-exports-imports-npm-and-beyond/#Imports)**
>
> Getting started with Node.js modules: require, exports, imports, and beyond.
> Modules are a crucial concept to understand Node.js projects. In this post, we cover Node modules: require, exports and, the future import.

Best,  
Donte

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [February 3, 2022, 10:48am UTC](https://devforum.zoom.us/t/cannot-import-module-in-nextjs/61974/5 "2022-02-03T10:48:46Z")

</div>

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