# Sample App React 2.18.0 crashing **URL:** \ **Category:** Meeting SDK\ **Tags:** sample-app\ **Created:** [November 29, 2023, 11:11am UTC](https://devforum.zoom.us/t/sample-app-react-2-18-0-crashing/99236 "2023-11-29T11:11:23Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![dkononov.zp](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dkononov.zp/32/50392_2.png) [@dkononov.zp](https://devforum.zoom.us/u/dkononov.zp)\ **Post date:** [November 29, 2023, 11:11am UTC](https://devforum.zoom.us/t/sample-app-react-2-18-0-crashing/99236/1 "2023-11-29T11:11:23Z")
### Format Your New Topic as Follows: Meeting SDK 2.18.0 Client View **Description** Hello. Very strange problem, 2-3 days ago I tested Meeting SDK on react-sample app, but I was strugling to implement it in my code, yesterday Sample App was working too (same version, same backend), so I was going to ask about my ipmplementation, BUT today, when I tried sample, it’s crashing too. My story (just in case it can help): Yesterday I was trying to connect sample app and my app to one meeting, sample app connected fine, my app was crashing with same errors as will be below, but from sample app i could see both users connected to meeting. On first load after launch in window with micro/camera check camera is not available, it’s in the list of devices, but it shows “unknown error”. ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/6/16516d58e35b42dcffce3fb16d8787312f08d464.png) **Error?** First of all, after loading page there are 3 warnings ```auto Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component? ``` ```auto Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot ``` After pressing Join meeting crashes and error list is a bit big: First error is about camera too, it appears only first time, after I reload page it’s just trying to join meeting without preview (probably should work like that, just saying): ```auto Uncaught (in promise) { "type": "VIDEO", "evt": "ERROR", "errorCode": "NOT_CONNECTED" } ``` And after that everything crashes: ```auto Uncaught ReferenceError: React is not defined B zoomus-websdk.umd.min.js:2 node_modules bundle.js:67580 React 4 i whiteboard-sdk.js:45 React 7 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 $t zoomus-websdk.umd.min.js:2 node_modules bundle.js:46859 middleware Redux Yt zoomus-websdk.umd.min.js:2 handleOnMessage zoomus-websdk.umd.min.js:2 node_modules bundle.js:183217 node_modules bundle.js:183216 React 3 i whiteboard-sdk.js:45 React 3 unstable_runWithPriority scheduler.development.js:653 React 4 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 node_modules bundle.js:44003 promise callback*./node_modules/ bundle.js:43987 Redux 2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 node_modules bundle.js:196561 f zoomus-websdk.umd.min.js:2 node_modules bundle.js:195962 node_modules bundle.js:195903 C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 promise callback*C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 node_modules bundle.js:196240 node_modules bundle.js:196232 q zoomus-websdk.umd.min.js:2 node_modules bundle.js:196778 node_modules bundle.js:196779 promise callback*A zoomus-websdk.umd.min.js:2 $ zoomus-websdk.umd.min.js:2 B zoomus-websdk.umd.min.js:2 node_modules bundle.js:196923 setInterval handler*join zoomus-websdk.umd.min.js:2 success App.js:56 U zoomus-websdk.umd.min.js:2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 init zoomus-websdk.umd.min.js:2 startMeeting App.js:51 getSignature App.js:41 promise callback*getSignature App.js:38 React 23 js index.js:8 factory react refresh:6 Webpack 3 zoomus-websdk.umd.min.js:2 B zoomus-websdk.umd.min.js:2 Z zoomus-websdk.umd.min.js:2 React 4 i whiteboard-sdk.js:45 React 7 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 $t zoomus-websdk.umd.min.js:2 An zoomus-websdk.umd.min.js:2 middleware Redux Yt zoomus-websdk.umd.min.js:2 handleOnMessage zoomus-websdk.umd.min.js:2 onmessage zoomus-websdk.umd.min.js:2 (Асинхронний: EventHandlerNonNull) Z zoomus-websdk.umd.min.js:2 React 3 i whiteboard-sdk.js:45 React 3 unstable_runWithPriority scheduler.development.js:653 React 4 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 n zoomus-websdk.umd.min.js:2 (Асинхронний: promise callback) n zoomus-websdk.umd.min.js:2 Redux 2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 t zoomus-websdk.umd.min.js:2 f zoomus-websdk.umd.min.js:2 E zoomus-websdk.umd.min.js:2 O zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 (Асинхронний: promise callback) C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 E zoomus-websdk.umd.min.js:2 E zoomus-websdk.umd.min.js:2 q zoomus-websdk.umd.min.js:2 A zoomus-websdk.umd.min.js:2 A zoomus-websdk.umd.min.js:2 (Асинхронний: promise callback) A zoomus-websdk.umd.min.js:2 $ zoomus-websdk.umd.min.js:2 B zoomus-websdk.umd.min.js:2 u zoomus-websdk.umd.min.js:2 (Асинхронний: setInterval handler) join zoomus-websdk.umd.min.js:2 success App.js:56 U zoomus-websdk.umd.min.js:2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 init zoomus-websdk.umd.min.js:2 startMeeting App.js:51 getSignature App.js:41 (Асинхронний: promise callback) getSignature App.js:38 React 19 forEach self-hosted:4384 React 4 js index.js:8 factory react refresh:6 Webpack 3 ``` ```auto The above error occurred in one of your React components: in Unknown (created by Connect(Component)) in Connect(Component) (created by rn) in div (created by rn) in div (created by rn) in footer (created by rn) in rn (created by Connect(rn)) in Connect(rn) in div in div in Unknown (created by Connect(Component)) in Connect(Component) (created by u) in div (created by u) in div (created by u) in u (created by i) in i in Unknown (created by Connect(Component)) in Connect(Component) (created by d) in div (created by d) in d (created by Connect(d)) in Connect(d) (created by a) in div (created by a) in a (created by Connect(a)) in Connect(a) (created by s) in div (created by s) in Unknown (created by s) in s Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:19527 ``` ```auto Uncaught TypeError: m.AK.connectSocket is not a function tn zoomus-websdk.umd.min.js:2 rn zoomus-websdk.umd.min.js:2 node_modules bundle.js:46876 middleware Redux Yt zoomus-websdk.umd.min.js:2 handleOnMessage zoomus-websdk.umd.min.js:2 node_modules bundle.js:183217 node_modules bundle.js:183216 React 3 i whiteboard-sdk.js:45 React 3 unstable_runWithPriority scheduler.development.js:653 React 4 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 node_modules bundle.js:44003 promise callback*./node_modules/ bundle.js:43987 Redux 2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 node_modules bundle.js:196561 f zoomus-websdk.umd.min.js:2 node_modules bundle.js:195962 node_modules bundle.js:195903 C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 promise callback*C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 node_modules bundle.js:196240 node_modules bundle.js:196232 q zoomus-websdk.umd.min.js:2 node_modules bundle.js:196778 node_modules bundle.js:196779 promise callback*A zoomus-websdk.umd.min.js:2 $ zoomus-websdk.umd.min.js:2 B zoomus-websdk.umd.min.js:2 node_modules bundle.js:196923 setInterval handler*join zoomus-websdk.umd.min.js:2 success App.js:56 U zoomus-websdk.umd.min.js:2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 init zoomus-websdk.umd.min.js:2 startMeeting App.js:51 getSignature App.js:41 promise callback*getSignature App.js:38 React 23 js index.js:8 factory react refresh:6 Webpack 3 2 zoomus-websdk.umd.min.js:2 tn zoomus-websdk.umd.min.js:2 rn zoomus-websdk.umd.min.js:2 An zoomus-websdk.umd.min.js:2 middleware Redux Yt zoomus-websdk.umd.min.js:2 handleOnMessage zoomus-websdk.umd.min.js:2 onmessage zoomus-websdk.umd.min.js:2 (Асинхронний: EventHandlerNonNull) Z zoomus-websdk.umd.min.js:2 React 3 i whiteboard-sdk.js:45 React 3 unstable_runWithPriority scheduler.development.js:653 React 4 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 n zoomus-websdk.umd.min.js:2 (Асинхронний: promise callback) n zoomus-websdk.umd.min.js:2 Redux 2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 t zoomus-websdk.umd.min.js:2 f zoomus-websdk.umd.min.js:2 E zoomus-websdk.umd.min.js:2 O zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 (Асинхронний: promise callback) C zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 E zoomus-websdk.umd.min.js:2 E zoomus-websdk.umd.min.js:2 q zoomus-websdk.umd.min.js:2 A zoomus-websdk.umd.min.js:2 A zoomus-websdk.umd.min.js:2 (Асинхронний: promise callback) A zoomus-websdk.umd.min.js:2 $ zoomus-websdk.umd.min.js:2 B zoomus-websdk.umd.min.js:2 u zoomus-websdk.umd.min.js:2 (Асинхронний: setInterval handler) join zoomus-websdk.umd.min.js:2 success App.js:56 U zoomus-websdk.umd.min.js:2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 init zoomus-websdk.umd.min.js:2 startMeeting App.js:51 getSignature App.js:41 (Асинхронний: promise callback) getSignature App.js:38 React 19 forEach self-hosted:4384 React 4 js index.js:8 factory react refresh:6 Webpack 3 ``` ```auto Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Unknown (created by Connect(Component)) in Connect(Component) (created by a) react-dom.development.js:88 React 5 qt zoomus-websdk.umd.min.js:2 Lodash 3 (Асинхронний: EventListener.handleEvent) Z zoomus-websdk.umd.min.js:2 React 6 unstable_runWithPriority scheduler.development.js:653 React 4 unstable_runWithPriority scheduler.development.js:653 React 4 notify zoomus-websdk.umd.min.js:2 notifyNestedSubs zoomus-websdk.umd.min.js:2 a zoomus-websdk.umd.min.js:2 Redux 3 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 join zoomus-websdk.umd.min.js:2 success App.js:56 U zoomus-websdk.umd.min.js:2 value zoomus-websdk.umd.min.js:2 C zoomus-websdk.umd.min.js:2 init zoomus-websdk.umd.min.js:2 startMeeting App.js:51 getSignature App.js:41 (Асинхронний: promise callback) getSignature App.js:38 React 23 js index.js:8 factory react refresh:6 Webpack 3 ``` That’s only errors, there are 6 more warnings there. **Troubleshooting Routes** Since I had error about camera, thought it could be something about permissions, so I cleared cache, cookies, permissions, gave permission to camera and mic by default. Also reinstalled node\_modules in app. Also, thought it might be about browser cache, so I installed completely clean browser (Mozilla) that I haven’t used. And of course, I checked my camera, it’s working in another app. Strangest thing is app was working two or three days ago, I’m changing only meeting number and password. **How To Reproduce** _Steps to reproduce the behavior including:_ ```auto import React from 'react'; import './App.css'; import { ZoomMtg } from '@zoomus/websdk'; ZoomMtg.setZoomJSLib('https://source.zoom.us/2.18.0/lib', '/av'); ZoomMtg.preLoadWasm(); ZoomMtg.prepareWebSDK(); // loads language files, also passes any error messages to the ui ZoomMtg.i18n.load('en-US'); ZoomMtg.i18n.reload('en-US'); function App() { // var authEndpoint = 'http://localhost:4000'; var authEndpoint = 'http://localhost:3333/video/generate-signature'; // var sdkKey = ''; var meetingNumber = '89664389436'; var passWord = 'AQWPe7'; var role = 0; var userName = 'Tomat'; var userEmail = 'hello@gmail.com'; // var registrantToken = '' // var zakToken = '' var leaveUrl = 'http://localhost:3000'; function getSignature(e) { e.preventDefault(); fetch(authEndpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ meetingNumber: meetingNumber, role: role, }), }) .then(res => res.json()) .then(response => { startMeeting(response.signature); }) .catch(error => { console.error(error); }); } function startMeeting(signature) { document.getElementById('zmmtg-root').style.display = 'block'; ZoomMtg.init({ leaveUrl: leaveUrl, success: success => { console.log(success); ZoomMtg.join({ signature, sdkKey: 'key-was-here', meetingNumber: meetingNumber, passWord: passWord, userName: userName, userEmail: userEmail, success: success => { console.log('success', success); }, error: error => { console.log(error); }, }); }, error: error => { console.log(error); }, }); } return (

Zoom Meeting SDK Sample React

); } export default App; ``` also, console.log on success init is there and shows ```auto Object { method: "init", status: true, errorCode: 0, errorMessage: null, result: null } App.js:54 ``` ---
**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\ **Post date:** [November 30, 2023, 7:51pm UTC](https://devforum.zoom.us/t/sample-app-react-2-18-0-crashing/99236/2 "2023-11-30T19:51:09Z")
Hi @dkononov.zp Thanks for reaching out to us! I am happy to help here! I noticed this behavior too with our sample app found here: [GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in React](https://github.com/zoom/meetingsdk-react-sample) It looks like we do not support React 18 with our Web Meeting Sdk 2.18, and we are currently working on this issue. In the meantime, what I did to fix this was: 1. Pull these dependencies via CDN ```auto ``` And got rid of my dependencies in the package.json but left these: ```auto "@zoomus/websdk": "^2.18.0", "web-vitals": "^3.5.0", "react-scripts": "^5.0.1" ``` After doing this, I deleted my package.json and node\_modules and ran the app again and that solved my issue. Could you please try something like this and let me know if this helps Cheers, Elisa ---
**Author:** ![dkononov.zp](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dkononov.zp/32/50392_2.png) [@dkononov.zp](https://devforum.zoom.us/u/dkononov.zp)\ **Post date:** [November 30, 2023, 8:16pm UTC](https://devforum.zoom.us/t/sample-app-react-2-18-0-crashing/99236/3 "2023-11-30T20:16:49Z")
Thank you, @elisa.zoom ! Well, that’s very strange, because today, after two hours of work, integration just started to work (not sample, my react app with integration). I’ve chagned nothing, so probably it was something about preloaded scripts here (?) ```auto ZoomMtg.setZoomJSLib('https://source.zoom.us/2.18.0/lib', '/av'); ZoomMtg.preLoadWasm(); ZoomMtg.prepareWebSDK(); ``` in other case, I have no ideas how’s that possible. Another argument in that way, is that sample app was working 2 days ago, 2.18.0 with react 18.2.0, I showed it to my colleague, so it was not hallucinations, and I changed nothing in it. Anyway, I hope someone who’s working on issue would not break it again, please 😅 But I’m still facing error with camera. On meeting preload microphone is turning on automatically, but video isn’t and I’m receiving an error ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/8/a/8a61de87f812128648d4174d7b304891b3085bf9.png) Also, on first load app is asking permission for audio, but not for video. But when I connected to meeting, I can turn camera on and it’s working. Maybe you have some ideas about it? Other logs after join, just in case: ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/e/bec18f96de791234990c50bceedb9b0e91ffdd4d.png) ---
**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\ **Post date:** [December 4, 2023, 6:33pm UTC](https://devforum.zoom.us/t/sample-app-react-2-18-0-crashing/99236/4 "2023-12-04T18:33:50Z")
Thanks @dkononov.zp We are currently looking into this and working on a resolution This last issue you are facing, can you replicate with the sample app? Have not seen this before