# Meet-sdk nextjs type error? help me

**URL:** <https://devforum.zoom.us/t/meet-sdk-nextjs-type-error-help-me/95698>\
**Category:** Web\
**Created:** [September 25, 2023, 4:58am UTC](https://devforum.zoom.us/t/meet-sdk-nextjs-type-error-help-me/95698 "2023-09-25T04:58:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![clus\_official](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/clus_official/32/52385_2.png) [@clus\_official](https://devforum.zoom.us/u/clus_official)\
**Post date:** [September 25, 2023, 4:58am UTC](https://devforum.zoom.us/t/meet-sdk-nextjs-type-error-help-me/95698/1 "2023-09-25T04:58:10Z")

</div>

hello  
I am a developer working at a Korean edtech company.

An error occurs when doing meet-sdk ZoomMtg.join.

When I ran the meet-sdk react example, it worked successfully, but an error occurred in the nextjs + typescript framework.

Information about the error is posted in the comments below.

Please be sure to check.

**Module Spec**  
“next”: “^13.2.4”,  
“react”: “^18.2.0”,  
“react-dom”: “^18.2.0”,  
“typescript”: “^4.9.5”  
“@typescript-eslint/eslint-plugin”: “^5.54.0”,  
“@typescript-eslint/parser”: “^5.54.0”,  
“@zeit/next-typescript”: “^1.1.1”,

**Use Component Code**

```auto
import dynamic from 'next/dynamic'

export const ZoomEmbedded = dynamic(
    async () => {
        const { ZoomEmbedded } = await import('@/components/domain/drill/live/zoom-embedded')

        return ZoomEmbedded
    },
    {
        ssr: false,
    },
)

export const ClassMyOngoingLiveZoomTemplate = () => {
    return <ZoomEmbedded />
}

```

**Zoom Component Code**

```auto
import { ZoomMtg } from '@zoomus/websdk';
import { useRouter } from 'next/router';
import { FC, useEffect } from 'react';

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.16.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load('ko-KO');
ZoomMtg.i18n.reload('ko-KO');

const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID

export const ZoomEmbedded:FC = () => {
    const router = useRouter();
    const signature = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJhRlBqckt6WVJLQ3lDWU9CUVB0bnBBIiwiaWF0IjoxNjk1NjE2NjQ1LCJleHAiOjE2OTU2MjM4NDUsIm1uIjo5MjIzNjc3OTA1NCwicm9sZSI6MH0.HX6gnIWH7-taXCFUregW-jNcUMoWTl09M3P7n21tZFc'
    const sdkKey = CLIENT_ID
    const meetingNumber = '92236779054'
    const passWord = 'dD8dZK'
    const role = 0
    const userName = 'test'
    const userEmail = 'mingiki@naver.com'
    const registrantToken = ''
    const zakToken = ''

    useEffect(()=>{
        const zoomElement = document.getElementById('zmmtg-root');
        const startMeeting = () => {
            if (zoomElement) {
                //meet-sdk
                zoomElement.style.display = 'block'

                ZoomMtg.init({
                    leaveUrl: router.asPath,

                    success: (success: any) => {
                        console.log(success)

                        const joinParams = {
                            signature: signature,
                            sdkKey: sdkKey,
                            meetingNumber: meetingNumber,
                            passWord: passWord,
                            userName: userName,
                            userEmail: userEmail,
                            tk: registrantToken,
                            zak: zakToken,
                            success: (success: any) => {
                                console.log('success', success)
                            },
                            error: (error: any) => {
                                console.log('error',error)
                            }
                        }

                        console.log('joinParams', joinParams)

                        ZoomMtg.join(joinParams)
                    },
                    error: (error: any) => {
                        console.log('error', error)
                    }
                })
            }
        }

        startMeeting();
    },[])

    return <>
    </>
}

```

---

<div class="post-metadata">

**Author:** ![clus\_official](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/clus_official/32/52385_2.png) [@clus\_official](https://devforum.zoom.us/u/clus_official)\
**Post date:** [September 25, 2023, 5:02am UTC](https://devforum.zoom.us/t/meet-sdk-nextjs-type-error-help-me/95698/2 "2023-09-25T05:02:50Z")

</div>

**Runtime Error**

# Unhandled Runtime Error

TypeError: Cannot read properties of null (reading ‘removeEventListener’)

##### Call Stack

###### R.bt

../node\_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js (2:3280543)

###### safelyCallDestroy

../node\_modules/react-dom/cjs/react-dom.development.js (22932:0)

###### commitHookEffectListUnmount

../node\_modules/react-dom/cjs/react-dom.development.js (23100:0)

###### commitPassiveUnmountInsideDeletedTreeOnFiber

../node\_modules/react-dom/cjs/react-dom.development.js (25098:0)

###### commitPassiveUnmountEffectsInsideOfDeletedTree\_begin

../node\_modules/react-dom/cjs/react-dom.development.js (25048:0)

###### commitPassiveUnmountEffects\_begin

../node\_modules/react-dom/cjs/react-dom.development.js (24956:0)

###### commitPassiveUnmountEffects

../node\_modules/react-dom/cjs/react-dom.development.js (24941:0)

###### flushPassiveEffectsImpl

../node\_modules/react-dom/cjs/react-dom.development.js (27038:0)

**Console error**

```auto
client.js:1 Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

client.js:1 Warning: Invalid DOM property `playsinline`. Did you mean `playsInline`?

client.js:1 Warning: Each child in a list should have a unique "key" prop.

client.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?

client.js:1 Warning: Failed prop type: The prop `id` is required to make `n` accessible for users of assistive technologies such as screen readers.

client.js:1 Warning: React does not recognize the `bsRole` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bsrole` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

client.js:1 Warning: React does not recognize the `bsClass` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bsclass` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

client.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

client.js:1 Warning: Each child in a list should have a unique "key" prop.

react-dom.development.js:22839 Uncaught TypeError: Cannot read properties of null (reading 'removeEventListener')

client.js:1 The above error occurred in the <R> component:

react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of null (reading 'removeEventListener')

zoomus-websdk.umd.min.js:2 Uncaught (in promise) {type: 'VIDEO', evt: 'ERROR', errorCode: 'NOT_CONNECTED', data: undefined}

zoomus-websdk.umd.min.js:2 Uncaught (in promise) {type: 'AUDIO', evt: 'ERROR', errorCode: 'NOT_CONNECTED', data: undefined}

```

---

<div class="post-metadata">

**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\
**Post date:** [September 28, 2023, 8:39pm UTC](https://devforum.zoom.us/t/meet-sdk-nextjs-type-error-help-me/95698/3 "2023-09-28T20:39:37Z")

</div>

Hi @clus_official Thanks for reaching out to us  
Are you able to replicate this error with our React sample app?

> **[GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in React](https://github.com/zoom/meetingsdk-react-sample)**
>
> Use the Zoom Meeting SDK in React. Contribute to zoom/meetingsdk-react-sample development by creating an account on GitHub.

---

<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:** [October 29, 2023, 6:40am UTC](https://devforum.zoom.us/t/meet-sdk-nextjs-type-error-help-me/95698/4 "2023-10-29T06:40:05Z")

</div>

Closed on October 29, 2023, 6:40am UTC

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