# Error with vitejs - \_.debounce is not a function **URL:** \ **Category:** Meeting SDK\ **Created:** [September 29, 2022, 7:15am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680 "2022-09-29T07:15:01Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![idoia](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/idoia/32/40616_2.png) [@idoia](https://devforum.zoom.us/u/idoia)\ **Post date:** [September 29, 2022, 7:15am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/1 "2022-09-29T07:15:01Z")
Hello! I’m trying to integrate **Zoom Meeting Web SDK with Client view** with **Vitejs** (+ react) [https://vitejs.dev/](https://vitejs.dev/). When using any function related with **ZoomMtg** like `ZoomMtg.preLoadWasm();` I get a blank page with a javascript error: ```auto "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”, ```auto 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. ---
**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\ **Post date:** [September 29, 2022, 6:42pm UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/2 "2022-09-29T18:42:59Z")
@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](https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/#install-from-npm) ```auto ``` # Getting Started [https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/) ---
**Author:** ![idoia](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/idoia/32/40616_2.png) [@idoia](https://devforum.zoom.us/u/idoia)\ **Post date:** [October 4, 2022, 9:07am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/3 "2022-10-04T09:07:24Z")
Hi @donte.zoom, thanks for the answer!Do you know when you plan to migrate to react 17 and 18? ---
**Author:** ![idoia](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/idoia/32/40616_2.png) [@idoia](https://devforum.zoom.us/u/idoia)\ **Post date:** [October 4, 2022, 9:37am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/4 "2022-10-04T09:37:33Z")
@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` ```auto "@zoomus/websdk": "^2.6.0", "react": "^16.0.0", "react-dom": "^16.0.0", ``` same with: ```auto "@zoomus/websdk": "^2.7.0", "react": "^16.14.0", "react-dom": "^16.14.0", ``` ---
**Author:** ![ldal](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@ldal](https://devforum.zoom.us/u/ldal)\ **Post date:** [October 5, 2022, 11:15am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/5 "2022-10-05T11:15:53Z")
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", .... ``` ---
**Author:** ![ldal](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@ldal](https://devforum.zoom.us/u/ldal)\ **Post date:** [October 7, 2022, 9:08am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/6 "2022-10-07T09:08:58Z")
I think it is a vite / lodash related problem… its not easy to go back to webpack… can anyone help? ---
**Author:** ![idoia](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/idoia/32/40616_2.png) [@idoia](https://devforum.zoom.us/u/idoia)\ **Post date:** [October 13, 2022, 2:30pm UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/8 "2022-10-13T14:30:25Z")
> [@donte.zoom](#): > > ```auto > > > ``` I think that adding this is the answer as Donte said ---
**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\ **Post date:** [October 13, 2022, 7:11pm UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/9 "2022-10-13T19:11:53Z")
@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. > **[GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in a React App](https://github.com/zoom/meetingsdk-react-sample)** > > Use the Zoom Meeting SDK in a React App. Contribute to zoom/meetingsdk-react-sample development by creating an account on GitHub. 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](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/e/3/e3390a866d269f30d094f065ed5c77b195b9234e.png) ---
**Author:** ![idoia](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/idoia/32/40616_2.png) [@idoia](https://devforum.zoom.us/u/idoia)\ **Post date:** [October 14, 2022, 10:40am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/10 "2022-10-14T10:40:16Z")
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](https://github.com/IdoiaRojo/video-call-error) ---
**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\ **Post date:** [October 15, 2022, 3:45am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/11 "2022-10-15T03:45:10Z")
@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 [https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/import/#about-appended-dom-elements](https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/import/#about-appended-dom-elements) ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/9/497d9a68dde247e68a2214dabe210c803262de9b.png) ---
**Author:** ![idoia](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/idoia/32/40616_2.png) [@idoia](https://devforum.zoom.us/u/idoia)\ **Post date:** [October 17, 2022, 10:36am UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/12 "2022-10-17T10:36:58Z")
@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!! ---
**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\ **Post date:** [October 17, 2022, 3:38pm UTC](https://devforum.zoom.us/t/error-with-vitejs-debounce-is-not-a-function/76680/13 "2022-10-17T15:38:56Z")
@idoia > [@idoia](#): > > 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!"` 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. > [@idoia](#): > > when I exit the zoom view from the “join meeting” view (using back button on the browser for example) 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.