Description
I am trying to implement the Zoom Meeting SDK on my Next JS app. Everything works fine until I join the room. It is working until the waiting room. But when the host lets me in, he sees me in the meeting but I got a black screen and errors on console.
Browser Console Error
instrument.js:122 ReferenceError: React is not defined
at Z (zoomus-websdk.umd.min.js:2:1710663)
at zoomus-websdk.umd.min.js:2:1653009
at l9 (react-dom.production.min.js:153:144)
at c (react-dom.production.min.js:261:494)
at aj (react-dom.production.min.js:246:259)
at react-dom.production.min.js:246:191
at aI (react-dom.production.min.js:246:191)
at react-dom.production.min.js:123:110
at t.unstable_runWithPriority (scheduler.production.min.js:19:460)
at lt (react-dom.production.min.js:122:318)
at ll (react-dom.production.min.js:123:61)
at lr (react-dom.production.min.js:122:496)
at aF (react-dom.production.min.js:240:55)
at Object.notify (zoomus-websdk.umd.min.js:2:6674270)
at Object.notifyNestedSubs (zoomus-websdk.umd.min.js:2:6674681)
at s (zoomus-websdk.umd.min.js:2:6674081)
at g (redux.js:296:1)
at index.js:20:1
at dispatch (redux.js:691:1)
at Module.eX (zoomus-websdk.umd.min.js:2:1146600)
at zoomus-websdk.umd.min.js:2:1205990
at index.js:16:1
at eK (zoomus-websdk.umd.min.js:2:4019154)
at Object.handleOnMessage (zoomus-websdk.umd.min.js:2:4020307)
at a..a..onmessage (zoomus-websdk.umd.min.js:2:4021060)
Uncaught ReferenceError: React is not defined
at Z (zoomus-websdk.umd.min.js:2:1710663)
at zoomus-websdk.umd.min.js:2:1653009
at l9 (react-dom.production.min.js:153:144)
at c (react-dom.production.min.js:261:494)
at aj (react-dom.production.min.js:246:259)
at react-dom.production.min.js:246:191
at aI (react-dom.production.min.js:246:191)
at react-dom.production.min.js:123:110
at t.unstable_runWithPriority (scheduler.production.min.js:19:460)
at lt (react-dom.production.min.js:122:318)
at ll (react-dom.production.min.js:123:61)
at lr (react-dom.production.min.js:122:496)
at aF (react-dom.production.min.js:240:55)
at Object.notify (zoomus-websdk.umd.min.js:2:6674270)
at Object.notifyNestedSubs (zoomus-websdk.umd.min.js:2:6674681)
at s (zoomus-websdk.umd.min.js:2:6674081)
at g (redux.js:296:1)
at index.js:20:1
at dispatch (redux.js:691:1)
at Module.eX (zoomus-websdk.umd.min.js:2:1146600)
at zoomus-websdk.umd.min.js:2:1205990
at index.js:16:1
at eK (zoomus-websdk.umd.min.js:2:4019154)
at Object.handleOnMessage (zoomus-websdk.umd.min.js:2:4020307)
at a..a..onmessage (zoomus-websdk.umd.min.js:2:4021060)
zoomus-websdk.umd.min.js:2 Uncaught TypeError: b.AK.connectSocket is not a function
at e$ (zoomus-websdk.umd.min.js:2:1148875)
at zoomus-websdk.umd.min.js:2:1192692
at index.js:16:1
at eK (zoomus-websdk.umd.min.js:2:4019154)
at Object.handleOnMessage (zoomus-websdk.umd.min.js:2:4020307)
at a..a..onmessage (zoomus-websdk.umd.min.js:2:4021060)
Which Web Meeting SDK version?
2.18.0
Meeting SDK Code Snippets
My Zoom component
/* eslint-disable consistent-return */
import { Box } from '@chakra-ui/react';
import React, {
useCallback,
useContext,
useEffect,
} from 'react';
import { useRouter } from 'next/router';
import { ZoomMtg } from '@zoomus/websdk';
import axios from 'axios';
import { MeContext } from 'modules/_shared/contexts/MeContext';
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');
const MeetingPage: React.FC = function () {
const router = useRouter();
const {
id,
} = router.query;
const { me } = useContext(MeContext);
const startZoomClient = useCallback(async (): Promise<void> => {
const { data: { signature } } = await axios.post('/api/zoom', { role: 0, meetingNumber: id });
ZoomMtg.init({
leaveUrl: '/patient',
success: (success: any) => {
ZoomMtg.join({
sdkKey: process.env.ZOOM_MEETING_SDK_KEY_OR_CLIENT_ID,
signature,
meetingNumber: id as string,
userName: me?.name || 'Patient',
success: (s: any) => {
console.log(s);
},
error: (error: any) => {
console.log(error);
},
});
},
error: (error: any) => {
console.log(error);
},
});
}, [id, me?.name]);
useEffect(() => {
startZoomClient();
}, []);
return (
<Box />
);
};
export default MeetingPage;
And my route page
/* eslint-disable consistent-return */
import React from 'react';
import dynamic from 'next/dynamic';
const Zoom = dynamic(() => import('./components/Zoom'), {
ssr: false,
});
const MeetingPage: React.FC = function () {
return (
<Zoom />
);
};
export default MeetingPage;
Device (please complete the following information):
- Device: Macbook Air M1
- OS: [e.g. macOS 13]
- Browser: Chrome
- Browser Version 119.0.6045.123 (Official Build) (arm64)
