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

**URL:** <https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248>\
**Category:** Web\
**Created:** [February 13, 2022, 3:02pm UTC](https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248 "2022-02-13T15:02:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pranshu.midha](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/pranshu.midha/32/34432_2.png) [@pranshu.midha](https://devforum.zoom.us/u/pranshu.midha)\
**Post date:** [February 13, 2022, 3:02pm UTC](https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248/1 "2022-02-13T15:02:24Z")

</div>

**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](https://devforum.zoom.us/t/referenceerror-window-is-not-defined/10604/5). 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**

 ![Screenshot 2022-02-14 at 2.00.27 AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/a/aac796cce00e3ca17e95f14d31ba889b981af16f.png)

**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.

---

<div class="post-metadata">

**Author:** ![mikew](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/mikew/32/35079_2.png) [@mikew](https://devforum.zoom.us/u/mikew)\
**Post date:** [February 15, 2022, 10:48am UTC](https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248/2 "2022-02-15T10:48:50Z")

</div>

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()`?

---

<div class="post-metadata">

**Author:** ![pranshu.midha](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/pranshu.midha/32/34432_2.png) [@pranshu.midha](https://devforum.zoom.us/u/pranshu.midha)\
**Post date:** [February 16, 2022, 3:13am UTC](https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248/3 "2022-02-16T03:13:16Z")

</div>

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

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

```

---

<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:** [February 27, 2022, 1:48am UTC](https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248/4 "2022-02-27T01:48:53Z")

</div>

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

---

<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:** [March 29, 2022, 11:49am UTC](https://devforum.zoom.us/t/nextjs-web-meeting-sdk-component-view-referenceerror-window-is-not-defined/64248/5 "2022-03-29T11:49:04Z")

</div>

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