# Zoom JS SDK React Packaging

**URL:** <https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707>\
**Category:** Web\
**Created:** [September 11, 2017, 6:30pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707 "2017-09-11T18:30:13Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Sarah\_Jones\_Zoom](https://avatars.discourse-cdn.com/v4/letter/_/e68b1a/32.png) [@\_Sarah\_Jones\_Zoom](https://devforum.zoom.us/u/_Sarah_Jones_Zoom)\
**Post date:** [September 11, 2017, 6:30pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/1 "2017-09-11T18:30:13Z")

</div>

Hello,

I am having issues including the Zoom JS SDK into my React JS project. I’ve tried emulating what was on the example web application, but putting the script tag that includes the Zoom SDK in the HTML causes a problem. The Zoom SDK is loaded before the other libraries that it depends on such as React and Redux. (We’ve installed these libraries through NPM).

Would it be possible to include the Zoom SDK on NPM to make this integration easier? Or maybe provide a tarball that includes the Zoom SDK?

---

<div class="post-metadata">

**Author:** ![Joshua\_Woodward1](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/joshua_woodward1/32/1480_2.png) [@Joshua\_Woodward1](https://devforum.zoom.us/u/Joshua_Woodward1)\
**Post date:** [September 11, 2017, 6:33pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/2 "2017-09-11T18:33:45Z")

</div>

How are you loading these (React and Redux) via your index file?

Make sure they get included before you add the zoom meeting script

---

<div class="post-metadata">

**Author:** ![\_Sarah\_Jones\_Zoom](https://avatars.discourse-cdn.com/v4/letter/_/e68b1a/32.png) [@\_Sarah\_Jones\_Zoom](https://devforum.zoom.us/u/_Sarah_Jones_Zoom)\
**Post date:** [September 11, 2017, 6:51pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/3 "2017-09-11T18:51:19Z")

</div>

We used NPM to install the dependencies of the Zoom JS SDK. Then when we run the React app, which was created by create-react-app command (most React apps are created like that), all the packages which were installed through NPM gets bundled into a single javascript file that gets included in our index.html file as a script tag. We can’t just include a script tag that includes the Zoom SDK into the html file directly because it will run before the bundled javascript libraries.&nbsp;

One work around idea was to manually append a script tag that includes the Zoom SDK after the bundle script tag has been included in the HTML through DOM manipulation. But that causes React rendering issues and the library does not exhibit the correct behavior. As an example, when we try to initialize a zoom meeting, the callback functions aren’t getting called, neither in success nor error. The zoom library is included however. In the developer console “window.ZoomMtg” is defined.

Is there a way the Zoom JS SDK can be packaged just like an NPM package so that we can include this locally without having to edit the HTML DOM?

---

<div class="post-metadata">

**Author:** ![Joshua\_Woodward1](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/joshua_woodward1/32/1480_2.png) [@Joshua\_Woodward1](https://devforum.zoom.us/u/Joshua_Woodward1)\
**Post date:** [September 11, 2017, 7:53pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/4 "2017-09-11T19:53:09Z")

</div>

Unfortunately it’s not setup that way currently.

&nbsp;

I tested this and the issue appears to be that React is not available in the global scope, even when bundled with react/webpack it’s not available globally.

The real problem is that the zoommeeting.js doesn’t have these dependencies included, that they are external

hence:&nbsp;  
\<script src=“lib/react.min.js”\>\</script\>  
\<script src=“lib/react-dom.min.js”\>\</script\>  
\<script src=“lib/redux.min.js”\>\</script\>  
\<script src=“lib/redux-thunk.min.js”\>\</script\>  
\<script src=“lib/jquery.min.js”\>\</script\>  
\<script src=“lib/jquery.i18n.js”\>\</script\>  
\<script src="[https://source.zoom.us/zoom-meeting-1.0.0.min.js"\>\</script](https://source.zoom.us/zoom-meeting-1.0.0.min.js%22%3E%3C/script)\>

---

<div class="post-metadata">

**Author:** ![\_Sarah\_Jones\_Zoom](https://avatars.discourse-cdn.com/v4/letter/_/e68b1a/32.png) [@\_Sarah\_Jones\_Zoom](https://devforum.zoom.us/u/_Sarah_Jones_Zoom)\
**Post date:** [September 11, 2017, 8:21pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/5 "2017-09-11T20:21:09Z")

</div>

Do you happen to have any suggestions how we would include the Zoom JS SDK in a React project?&nbsp;

---

<div class="post-metadata">

**Author:** ![\_Sarah\_Jones\_Zoom](https://avatars.discourse-cdn.com/v4/letter/_/e68b1a/32.png) [@\_Sarah\_Jones\_Zoom](https://devforum.zoom.us/u/_Sarah_Jones_Zoom)\
**Post date:** [September 11, 2017, 11:01pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/6 "2017-09-11T23:01:56Z")

</div>

We made some progress by including all of the script tags in the index.html body like so:

```
\<script src="https://unpkg.com/react@15.1.0/dist/react.js"\>\</script\>
\<script src="https://unpkg.com/react-dom@15.1.0/dist/react-dom.js"\>\</script\>
\<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"\>\</script\>
\<script src="./lib/redux-thunk.min.js"\>\</script\>
\<script
 src="https://code.jquery.com/jquery-1.12.4.js"
 integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
 crossorigin="anonymous"\>\</script\>
\<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"\>\</script\>
\<script src="./lib/jquery.i18n.js"\>\</script\>
\<script src="./lib/zoom-meeting-1.0.0.min.js"\>\</script\>

```

We can now successfully call ZoomMtg.init() and ZoomMtg.leaveMeeting(). However, when we call ZoomMtg.join(), we successfully show up in the Host’s list of participants, but the Zoom UI does not show up for the participant. We can’t see any of the video or screen share or anything from the participant’s point of view. None of the UI renders. Do you have any suggestions on where to go from here? We get an error stack trace like this after calling ZoomMtg.join():

 ![](https://support.zoom.us/hc/user_images/hENLvFdFVPzmQmt2SZ8CDw.png) ![](https://support.zoom.us/hc/user_images/dewkBRBrzv6MDfkC1gJpNQ.png)

---

<div class="post-metadata">

**Author:** ![dpearson2699](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dpearson2699/32/2401_2.png) [@dpearson2699](https://devforum.zoom.us/u/dpearson2699)\
**Post date:** [November 19, 2019, 7:25am UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/7 "2019-11-19T07:25:43Z")

</div>

Any new developments with being able to integrate the Zoom JS SDK into a React JS project?

---

<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:** [November 19, 2019, 8:26pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/8 "2019-11-19T20:26:09Z")

</div>

Hey @dpearson2699,

Yes you can use the Zoom Web SDK in a react project!

Follow our docs here:

> **[Web - Native SDKs - Zoom Software Development Kit (Zoom SDK)](https://marketplace.zoom.us/docs/sdk/native-sdks/web)**
>
> Zoom Web SDK
> 
> The Web SDK enables the development of video applications powered by Zoom's core framework inside an HTML5 web client through a highly opt...

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![danielblignaut](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/danielblignaut/32/2429_2.png) [@danielblignaut](https://devforum.zoom.us/u/danielblignaut)\
**Post date:** [November 23, 2019, 3:30pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/9 "2019-11-23T15:30:32Z")

</div>

Hi Tommy,

Thanks for the feedback. However I’m trying to load the zoom JS SDK in my nextjs application. As such, instead of the standard setup, I’m loading all packages through npm, bundling with webpack and setting the global jQuery variables in the webpack externals section. When loading a page, I now get an error referencing circular structures when webpack tries to bundle a specific page and this error happens as soon as I interact with the zoomjs sdk. Are there any known reasons why zoom can’t work as a regular old non module in an es6 project that could shed some light on this?

---

<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:** [November 25, 2019, 5:19pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/10 "2019-11-25T17:19:52Z")

</div>

Hey @danielblignaut,

Can you share a github link to your code and steps to reproduce the error?

Also please show a screenshot of the error message.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![frayeralex](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/frayeralex/32/2511_2.png) [@frayeralex](https://devforum.zoom.us/u/frayeralex)\
**Post date:** [December 3, 2019, 1:58pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/11 "2019-12-03T13:58:05Z")

</div>

@danielblignaut try to use next steps:

1. npm install customize-cra, react-app-rewired -D

2. add config-overrides.js file in project root

> >

const { override, addWebpackAlias } = require(‘customize-cra’);

module.exports = override(  
addWebpackAlias({  
‘jQuery’: ‘jquery’  
})  
);

> >

its rewrite webpack config and avoid CRA eject

1. update your packege.json “start”: “react-scripts-\>react-app-rewired start”,

2. add to end of … in public/index.html

3. try to import { ZoomMtg } from ‘zoomus-jssdk’;

its not good solution, because we modify CRA cofig/run sripts - but I didnt found better way to resolve issue

---

<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:** [December 3, 2019, 9:17pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/12 "2019-12-03T21:17:33Z")

</div>

Hey @frayeralex,

What specifically is the issue?

Are you running the latest version, Web SDK 1.7.0?

[https://marketplace.zoom.us/docs/changelog](https://marketplace.zoom.us/docs/changelog)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![frayeralex](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/frayeralex/32/2511_2.png) [@frayeralex](https://devforum.zoom.us/u/frayeralex)\
**Post date:** [December 5, 2019, 5:34pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/13 "2019-12-05T17:34:54Z")

</div>

Hi @tommy,

awesome - I try to set up web version zoom-SDK a few days ago, and all attempts to run SDK in React SPA was failed. Today I update from 1.6.1 to 1.7 version and it runs, with console warnings))) but it runs))

but made “eject create-react-app” only to configure alias jQuery -\> jquery (didn’t use approach which I describe 2 days ago)))

thx for fix

---

<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:** [December 5, 2019, 5:39pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/14 "2019-12-05T17:39:31Z")

</div>

Hey @frayeralex,

Happy to hear it is working after upgrading to 1.7.0! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 6:57pm UTC](https://devforum.zoom.us/t/zoom-js-sdk-react-packaging/707/15 "2020-08-21T18:57:45Z")

</div>