Not able to integrate Zoom WebSDK in my react app

udit · March 24, 2020, 9:09am

Description
I am integrating zoom into my current react app, but as soon as I import the ZoomMtg in my index.js file it is making my app unresponsive. So I tried to make another file called zoomIndex.js and configured my webpack for multiple entry point. Now I am getting ReferenceError: $ is not defined.

Error
zoomus-websdk.umd.min.js:2 Uncaught ReferenceError: $ is not defined
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Module. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Module. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at zoomus-websdk.umd.min.js:2
at zoomus-websdk.umd.min.js:2
at zoomus-websdk.umd.min.js:2
at Object…/node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js (zoomus-websdk.umd.min.js:2)
at webpack_require (bootstrap:784)
at fn (bootstrap:150)
at Object…/node_modules/@zoomus/websdk/index.js (index.js:3)
at webpack_require (bootstrap:784)
at fn (bootstrap:150)
at Module…/src/index.js (index.css?f3f6:45)
at webpack_require (bootstrap:784)
at fn (bootstrap:150)
at Object.2 (serviceWorker.js:141)
at webpack_require (bootstrap:784)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at app.chunk.js:1

Which version?
“@zoomus/websdk”: “^1.7.2”,
“react”: “^16.13.1”,
“react-dom”: “^16.13.1”,
“redux”: “^4.0.5”,
“redux-thunk”: “^2.3.0”,
“jquery”: “^3.4.1”,
“lodash”: “^4.17.15”,

Additional context
Please also let me know how can I include the ZoomMtg inside my react components

tommy · March 24, 2020, 6:40pm

Hey @udit,

The ReferenceError: $ is not defined error can be fixed by providing jQuery globally like adding a script in your index.html file:

github.com

zoom/sample-app-web/blob/master/CDN/index.html#L41


            </form>
        </div><!--/.navbar-collapse -->
    </div>
</nav>




<script src="https://source.zoom.us/1.7.2/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/lodash.min.js"></script>


<script src="https://source.zoom.us/zoom-meeting-1.7.2.min.js"></script>
<script src="js/index.js"></script>


<script>
   
</script>
</body>
</html>

Thanks,
Tommy

laxmanpai212 · May 15, 2020, 5:31pm

What if i dont want to use CDN, tried using JQuery NPM package, still this is not fixed.

ravikumar · May 18, 2020, 2:20pm

I am trying to create a new react project. And I have installed the @zoomus/websdk package and its dependencies locally. And I am trying to import the @zoomus/websdk package in App.js file, it throws the referenceerror: $ is not defined error.

tommy · May 22, 2020, 7:57pm

Hey @ravikumar, @laxmanpai212,

Make sure to provide the jQuery reference in your app:

Thanks,
Tommy

Topic		Replies	Views
ReferenceError: $ is not defined Web	2	998	November 1, 2020
Using Zoom Web SDK with a React Widget Thats used in JupyterLab Web	2	797	August 21, 2020
Before I completely give up on the Web SDK Web	7	1482	August 21, 2020
Import { ZoomMtg } from '@zoomus/websdk'; causing React app to become unresponsive Web	4	1058	August 21, 2020
Getting Error JsMediaSDK_Instance is not defined in Zoom Integration To Reactjs Web	8	2363	November 1, 2020

Not able to integrate Zoom WebSDK in my react app

Related Topics