Hi, I have a React app that uses the Zoom Meeting SDK for Web. I’ve just upgraded to the latest version: 3.1.6 and I am getting the error below:
Uncaught TypeError: Cannot read properties of undefined (reading 'webEndpoint')
at Function.mapToProps (zoomus-websdk-loginview.umd.min.js:1:26257)
at r (zoomus-websdk-zoommtgMain.umd.min.js:2:1912216)
at r.mapToProps (zoomus-websdk-zoommtgMain.umd.min.js:2:1912334)
at r (zoomus-websdk-zoommtgMain.umd.min.js:2:1912198)
at zoomus-websdk-zoommtgMain.umd.min.js:2:1911642
at zoomus-websdk-zoommtgMain.umd.min.js:2:1908203
at mountMemo (react-dom.development.js:15442:19)
at Object.useMemo (react-dom.development.js:15738:16)
at useMemo (react.development.js:1521:21)
at O (zoomus-websdk-zoommtgMain.umd.min.js:2:1908147)
The above error occurred in the <Connect(t)> component:
in Connect(t)
in Unknown (created by Connect(Component))
in Connect(Component) (created by s)
in div (created by s)
in c (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.
log
Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js:248:19)
at invokeGuardedCallback (react-dom.development.js:292:31)
at beginWork$1 (react-dom.development.js:23203:7)
at performUnitOfWork (react-dom.development.js:22154:12)
at workLoopSync (react-dom.development.js:22130:22)
at performSyncWorkOnRoot (react-dom.development.js:21756:9)
at react-dom.development.js:11089:24
at unstable_runWithPriority (scheduler.development.js:653:12)
at runWithPriority$1 (react-dom.development.js:11039:10)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084:7)
Which Web Meeting SDK version?
3.1.6
Meeting SDK Code Snippets
This is the hook that I am using to start the Zoom app:
import { ZoomMtg } from '@zoom/meetingsdk';
import { useZoomState } from '../../../../common/providers/zoom/zoom-provider/zoom.provider';
import { useUserState } from '../../../../common/providers/user/user-provider/user.provider';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
export function useStartZoom() {
const { openZoom, meetingId, meetingPass, sdkKey, sdkSignature } = useZoomState();
const { zoomName, email } = useUserState();
const { i18n } = useTranslation();
useEffect(() => {
if (!openZoom) {
ZoomMtg.leaveMeeting({});
return;
}
const isDebug = process.env.REACT_APP_UPDATE_CHANNEL !== 'latest';
ZoomMtg.setLogLevel(isDebug ? 'info' : 'error');
ZoomMtg.setZoomJSLib('https://source.zoom.us/3.1.6/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
switch (i18n.language) {
case 'pt':
ZoomMtg.i18n.load('pt-PT');
break;
case 'en':
ZoomMtg.i18n.load('en-US');
break;
case 'es':
ZoomMtg.i18n.load('es-ES');
break;
case 'it':
ZoomMtg.i18n.load('it-IT');
break;
default:
ZoomMtg.i18n.load('en-US');
break;
}
ZoomMtg.init({
debug: isDebug,
leaveUrl: '/leave-zoom-meeting',
disableInvite: true,
disableCallOut: true,
disableRecord: true,
disablePreview: true,
screenShare: false,
meetingInfo: [],
success: () => {
ZoomMtg.join({
signature: sdkSignature!,
meetingNumber: meetingId!,
userName: zoomName!,
userEmail: email!,
sdkKey: sdkKey!,
passWord: meetingPass!,
success: () => {},
error: (error: any) => {
console.error('Error joining meeting', error);
},
});
},
error: (error: any) => {
console.error('Error initializing Zoom', error);
},
});
}, [openZoom]); // eslint-disable-line react-hooks/exhaustive-deps
}
And I’ve also added these to my app’s index.html file:
<head>
<script src="https://source.zoom.us/3.1.6/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/lodash.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/3.1.6/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/3.1.6/css/react-select.css" />
</head>
Device:
- Device: Macbook Pro (M1)
- OS: Sonoma 14.2.1
- Browser: Chrome (Electron - 22.3.27)
- Browser Version: Chrome/108.0.5359.215