Not able to integrate Zoom WebSDK in my react app

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

2 Likes

Hey @udit,

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

Thanks,
Tommy

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

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.

Hey @ravikumar, @laxmanpai212,

Make sure to provide the jQuery reference in your app:

Thanks,
Tommy