Error with vitejs - _.debounce is not a function

Meeting SDK
1

Hello!

I’m trying to integrate Zoom Meeting Web SDK with Client view with Vitejs(+ react) https://vitejs.dev/. When using any function related with ZoomMtg like ZoomMtg.preLoadWasm(); I get a blank page with a javascript error:

"zoomus-websdk.umd.min.js:2 Uncaught TypeError: _.debounce is not a
function".

I’m using:
“react”: “^18.2.0”,
“@zoomus/websdk”: “^2.7.0”,

import React, { useEffect } from "react";
import { ZoomMtg } from "@zoomus/websdk";

export const VideoCall = () => {
  useEffect(() => {
    ZoomMtg.preLoadWasm();
  }, []);

  return <></>;
};

I’ve seen other posts with similar issue, but no solution. Any chance you could help me with this?
Thanks.

2

@idoia,

Thank you for posting in the Developer Forum. The behavior you are seeing is likely due to the react version you are using. You use React 18, so this may be the root cause of the behavior you are seeing as we package build with React 16. Please do try to downgrade your react version to 16. Also, to resolve the _.debounce error, can you use the script below to introduce lodash and you will also need to add css scripts here

  <script src="https://source.zoom.us/{VERSION_NUMBER}/lib/vendor/lodash.min.js"></script>

Getting Started

1 Like
3

Hi @donte.zoom,
thanks for the answer!Do you know when you plan to migrate to react 17 and 18?

4

@donte.zoom , I’ve tried downgrading to react 16, and I have a new error:
zoomus-websdk.umd.min.js:2 Uncaught TypeError: c2 is not a function

    "@zoomus/websdk": "^2.6.0",
    "react": "^16.0.0", 
    "react-dom": "^16.0.0",

same with:

    "@zoomus/websdk": "^2.7.0",
    "react": "^16.14.0", 
    "react-dom": "^16.14.0",
5

same problem here…

zoomus-websdk.umd.min.js:2 Uncaught TypeError: c2 is not a function
at dt (zoomus-websdk.umd.min.js:2:3638431)
at 48575 (zoomus-websdk.umd.min.js:2:2831595)
at webpack_require (zoomus-websdk.umd.min.js:2:6924410)
at 63301 (zoomus-websdk.umd.min.js:2:2059217)
at webpack_require (zoomus-websdk.umd.min.js:2:6924410)
at 89381 (zoomus-websdk.umd.min.js:2:2064660)
at webpack_require (zoomus-websdk.umd.min.js:2:6924410)
at 20623 (zoomus-websdk.umd.min.js:2:2924528)
at webpack_require (zoomus-websdk.umd.min.js:2:6924410)
at 65007 (zoomus-websdk.umd.min.js:2:2931873)

on a vue 3 project

"dependencies": {
	"@zoomus/websdk": "2.8.0",
            ....

also tried with 2.7.0

"devDependencies": {
	"react": "16.13.0",
	"react-dom": "16.13.0",
	"react-redux": "7.2.4",
	"redux": "3.7.2",
	"redux-thunk": "2.3.0",
	"lodash": "^4.17.21",
     ....
6

I think it is a vite / lodash related problem… its not easy to go back to webpack… can anyone help?

1 Like
8

I think that adding this is the answer as Donte said

9

@idoia ,

Thanks for your contributions, @idoia! Can you share if you are still facing problems getting the SDK working with Vite? If so, are you able to share a repo so I can test it on my end?

You may also be interested in referencing our React Meeting SDK sample app implementation.

Also, I noticed you are calling ZoomMtg.preLoadWasm() inside of useEffect, can you try calling ZoomMtg.preLoadWasm() and ZoomMtg.prepareJssdk() functions. in the first couple of lines :

image
image809×231 24.5 KB

10

Hi @donte.zoom, thanks for answering. I’ve followed your advices but I’m still facing problems. I don’t have the javascript problems (_.debounce, c2 is not a function ), but I get a black screen all the time because of the #zmmtg-root element. I guess there is something that is not loading correctly. I have a repo and some screenshots or a video showing the error but I can’t share it with the post (Sorry, you can’t embed media items in a post.):
github repo: https://github.com/IdoiaRojo/video-call-error

11

@idoia ,
That’s an easy fix – be sure to set #zmmtg-root element to none:

Then when initializing the SDK, you want to set the display to block:

For reference, you can find more details on this topic here:

About Appended DOM Elements

image
image918×577 45.2 KB

12

@donte.zoom, you are completely right, I had forgotten that I had already added the class, so thanks for that; the problem is when I exit the zoom view from the “join meeting” view (using back button on the browser for example), if I try to catch the onpopstate event to hide the zmmtg-root element, it stays with the red dot in the browser tab, and if I try to use the ZoomMtg.leaveMeeting function I get an error saying errorMessage: "Please join meeting first!", is there any way to do it correctly without having to reload the page? Thanks!!

1 Like
13

@idoia

Great question! When you say red dot in the browser tab, are you referring to dot the displays when recording? If so, Chrome displays a blinking red dot in the page’s tab as long as the site is recording. To confirm, can you please provide me with a screenshot so we can help in a better way?

To that end, I’d recommend checking to see if there is a way to programmatically stop the browser recording or remove the permission to allow recording before hiding the zmmtg-root element.

Aside from showing/hiding of the zmmtg-root element as recommended above, this is contingent on the user experience you are looking to accomplish and your implementation approach.
Please provide more context on the user experience you are looking to create by using the back button. It will also be helpful to understand what alternatives have you considered to produce the same result as well.