# Getting Error JsMediaSDK\_Instance is not defined in Zoom Integration To Reactjs

**URL:** <https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625>\
**Category:** Web\
**Created:** [August 31, 2020, 11:05am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625 "2020-08-31T11:05:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![muna.sethi](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@muna.sethi](https://devforum.zoom.us/u/muna.sethi)\
**Post date:** [August 31, 2020, 11:05am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/1 "2020-08-31T11:05:38Z")

</div>

I Have Integrated to ReactJs With local installation of ZoomSDK.

Link followed.

> **[zoom/websdk](https://github.com/zoom/websdk#readme)**
>
> Zoom Web SDK. Contribute to zoom/websdk development by creating an account on GitHub.

As i am joining the meeting I am getting below error.  
Uncaught ReferenceError: JsMediaSDK\_Instance is not defined  
at new e (zoomus-websdk.umd.min.js:2)  
at C.value (zoomus-websdk.umd.min.js:2)  
at C.value (react-hot-loader.development.js:714)  
at C.value (zoomus-websdk.umd.min.js:2)  
at C.value (react-hot-loader.development.js:704)  
at commitLifeCycles (react-dom.development.js:19848)  
at commitLayoutEffects (react-dom.development.js:22835)  
at HTMLUnknownElement.callCallback (react-dom.development.js:189)  
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)  
at invokeGuardedCallback (react-dom.development.js:293)

Version:-  
React Version : 16.13.1  
ZoomSDK version 1.8.0

I have tried all the Methods Provider but didn’t help.

please help me on this ASAP.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 3, 2020, 12:14am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/2 "2020-09-03T00:14:57Z")

</div>

Hey @muna.sethi,

Can you please share your Web SDK code snippet and steps to reproduce the issue so we can help?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![muna.sethi](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@muna.sethi](https://devforum.zoom.us/u/muna.sethi)\
**Post date:** [September 3, 2020, 4:43am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/3 "2020-09-03T04:43:18Z")

</div>

Hi,  
Please find below is the code snippet for Web SDK. it’s running fine till Zoom init function . but giving issue when control reaches Join . and as i have mentioned in previous post it’s giving below error.  
_ **JsMediaSDK\_Instance is not defined** _

const beginJoin = (meetingConfig) =\> {  
ZoomMtg.init({  
leaveUrl: window.location.href,  
webEndpoint: meetingConfig.webEndpoint,  
success: function () {  
console.log(meetingConfig);  
$.i18n.reload(meetingConfig.lang);  
ZoomMtg.join({  
meetingNumber: meetingConfig.mn,  
userName: meetingConfig.name,  
signature: meetingConfig.signature,  
apiKey: meetingConfig.apiKey,  
userEmail: meetingConfig.email,  
passWord: meetingConfig.pwd,  
success: function (res) {  
console.log(“join meeting success”);  
console.log(“get attendeelist”);  
ZoomMtg.getAttendeeslist({});  
ZoomMtg.getCurrentUser({  
success: function (res) {  
console.log(“success getCurrentUser”, res.result.currentUser);  
},  
});  
},  
error: function (res) {  
alert(res.result);  
},  
});  
},  
error: function (res) {  
console.log(res);  
},  
});

```
        ZoomMtg.inMeetingServiceListener('onUserJoin', function (data) {
            console.log('inMeetingServiceListener onUserJoin', data);
        });

        ZoomMtg.inMeetingServiceListener('onUserLeave', function (data) {
            console.log('inMeetingServiceListener onUserLeave', data);
        });

        ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', function (data) {
            console.log('inMeetingServiceListener onUserIsInWaitingRoom', data);
        });

        ZoomMtg.inMeetingServiceListener('onMeetingStatus', function (data) {
            console.log('inMeetingServiceListener onMeetingStatus', data);
        });
}

const onClickJoinMeeting = () => {
    let API_KEY = "KEY";
    let API_SECRET = "SECRET";
    var meetingConfig = testTool.getMeetingConfig();
    if (!meetingConfig.mn || !meetingConfig.name) {
        alert("Meeting number or username is empty");
        return false;
    }

    testTool.setCookie("meeting_number", meetingConfig.mn);
    testTool.setCookie("meeting_pwd", meetingConfig.pwd);

        var signature = ZoomMtg.generateSignature({
            leaveUrl: "/",
            meetingNumber: meetingConfig.mn,
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            role: meetingConfig.role,
            success: function (res) {
                console.log(res.result);
                meetingConfig.signature = res.result;
                meetingConfig.apiKey = API_KEY;
                if (meetingConfig.china == "1") {
                    ZoomMtg.setZoomJSLib("https://jssdk.zoomus.cn/1.7.10/lib", "/av"); // china cdn option
                }                                      
                ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
                ZoomMtg.preLoadWasm();
                ZoomMtg.prepareJssdk();
                beginJoin(meetingConfig);
            },
        });
}

```

Also in my case i am not using all the script include of the dependent modules like React , React-dom .  
because that is already installed through npm .

below is the Html file.

added in Header

```
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.10/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.10/css/react-select.css" />    

```

Added in Body

```
  <script src="https://source.zoom.us/1.7.10/lib/vendor/jquery.min.js"></script>
```

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 4, 2020, 10:28pm UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/4 "2020-09-04T22:28:54Z")

</div>

Hey @muna.sethi,

> [@muna.sethi](#):
>
> ```auto
> if (meetingConfig.china == "1") {
> ZoomMtg.setZoomJSLib("https://jssdk.zoomus.cn/1.7.10/lib", "/av"); // china cdn option
> }                                      
> ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
> ZoomMtg.preLoadWasm();
> ZoomMtg.prepareJssdk();
> beginJoin(meetingConfig);
> 
> ```

Please try loading the files / scripts on page load instead of right before calling the join function.

Here is a good example using the Angular sample app:

> <https://github.com/zoom/meetingsdk-angular-sample/blob/master/src/app/app.component.ts#L7>

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![muna.sethi](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@muna.sethi](https://devforum.zoom.us/u/muna.sethi)\
**Post date:** [September 7, 2020, 5:55am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/5 "2020-09-07T05:55:19Z")

</div>

**Tried giving it before the loading of files.**

**but still getting same error.**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/5/5a13066275f3efadb226b7ef8626488bd8d1e1c7.png)

React Code FYR :-

ZoomMtg.setZoomJSLib(‘[https://source.zoom.us/1.7.10/lib](https://source.zoom.us/1.7.10/lib)’, ‘/av’);  
ZoomMtg.preLoadWasm();  
ZoomMtg.prepareJssdk();

const ZoomSample = () =\> {  
…  
const JoinMeeting = () =\> {  
let API\_KEY = “**";  
let API\_SECRET = "**”;  
var meetingConfig = testTool.getMeetingConfig();  
if (!meetingConfig.mn || !meetingConfig.name) {  
alert(“Meeting number or username is empty”);  
return false;  
}

```
    testTool.setCookie("meeting_number", meetingConfig.mn);
    testTool.setCookie("meeting_pwd", meetingConfig.pwd);

        var signature = ZoomMtg.generateSignature({
            leaveUrl: "/",
            meetingNumber: meetingConfig.mn,
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            role: meetingConfig.role,
            success: function (res) {
                console.log(res.result);
                meetingConfig.signature = res.result;
                meetingConfig.apiKey = API_KEY;
               
                let objDefaultDiv = document.getElementById("zmmtg-root");
                if (objDefaultDiv) {
                    objDefaultDiv.hidden = false;
                }
                console.log(joinUrl);
                beginJoin(meetingConfig);
            },
        });
}	

```

}

# also tried keeping in useEffect

const ZoomSample = () =\> {

```
  useEffect(() => {
        ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareJssdk();
}, []);
..............
const JoinMeeting = () => {
    let API_KEY = " ********";
    let API_SECRET = " ********";
    var meetingConfig = testTool.getMeetingConfig();
    if (!meetingConfig.mn || !meetingConfig.name) {
        alert("Meeting number or username is empty");
        return false;
    }

    testTool.setCookie("meeting_number", meetingConfig.mn);
    testTool.setCookie("meeting_pwd", meetingConfig.pwd);

        var signature = ZoomMtg.generateSignature({
            leaveUrl: "/",
            meetingNumber: meetingConfig.mn,
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            role: meetingConfig.role,
            success: function (res) {
                console.log(res.result);
                meetingConfig.signature = res.result;
                meetingConfig.apiKey = API_KEY;
               
                let objDefaultDiv = document.getElementById("zmmtg-root");
                if (objDefaultDiv) {
                    objDefaultDiv.hidden = false;
                }
                console.log(joinUrl);
                beginJoin(meetingConfig);
            },
        });
}	

```

}

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 10, 2020, 1:18am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/6 "2020-09-10T01:18:06Z")

</div>

Hey @muna.sethi,

Can you please share a sample GitHub repo with the issue so we can reproduce the issue and debug locally?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![muna.sethi](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@muna.sethi](https://devforum.zoom.us/u/muna.sethi)\
**Post date:** [September 30, 2020, 5:16am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/7 "2020-09-30T05:16:28Z")

</div>

Hi,  
the Problem appears only when i keep the node\_modules in different folder.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [October 1, 2020, 6:30pm UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/8 "2020-10-01T18:30:52Z")

</div>

Hey @muna.sethi,

Yes, all the Web SDK files need to be accessible, as mentioned here:

> **[@zoomus/websdk](https://www.npmjs.com/package/@zoomus/websdk#usage)**
>
> Zoom Web SDK

Thanks,  
Tommy

---

<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:** [November 1, 2020, 4:30am UTC](https://devforum.zoom.us/t/getting-error-jsmediasdk-instance-is-not-defined-in-zoom-integration-to-reactjs/28625/9 "2020-11-01T04:30:53Z")

</div>

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