I am trying to integrate zoom meeting sdk in my next js application. However no matter what i change i am getting the following error.
Forums suggest that this is because of react 19, however i tried to rollback to react 18 but issue still persists.
Uncaught TypeError: Cannot read properties of undefined (reading ‘ReactCurrentOwner’)
Meeting SDK Version: 4.0.7
‘use client’;
import { useEffect, useRef, useState } from ‘react’;
import { useParams, useRouter } from ‘next/navigation’;
import Script from ‘next/script’;
import { useMeetingSignature } from ‘@/hooks/use-meetings’;
import * as ReactLib from ‘react’;
import * as ReactDOMLib from ‘react-dom’;
import ZoomMtgEmbedded from ‘@zoom/meetingsdk/embedded’;
export default function MeetingPage() {
const params = useParams();
const [client, setClient] = useState(null);
const meetingId = params.id as string;
const [ZoomMtg, setZoomMtg] = useState(null);
const authEndpoint = “”; // Replace with your endpoint
const sdkKey = “”; // Replace with your Zoom SDK Key
const meetingNumber = “87630774193”; // Replace with your meeting number
const passWord = “”; // Replace with your meeting password
const role = 0; // 0 = Attendee, 1 = Host
const userName = “React”;
const leaveUrl = “”;
const { generateSignature, loading: signatureLoading, error: signatureError } = useMeetingSignature();
useEffect(() => {
const client = ZoomMtgEmbedded.createClient();
const meetingSDKElement = document.getElementById(“zmmtg-root”) as HTMLElement | null;
if (!meetingSDKElement) return;
client.init({ zoomAppRoot: meetingSDKElement, language: “en-US” });
setClient(client);
}, );
const getSignature = async () => {
try {
const res = await generateSignature(meetingNumber, role);
console.log(“Res:”, res);
if (res && res.signature) {
console.log(“Signature:”, res.signature);
startMeeting({
signature: res.signature,
sdkKey: (res as any).sdkKey || sdkKey,
meetingNumber: (res as any).meetingNumber || meetingNumber,
passWord,
});
} else {
console.error(“Failed to generate signature”, signatureError);
}
} catch (error) {
console.error(“Error generating signature:”, error);
}
};
const startMeeting = (opts: { signature: string; sdkKey: string; meetingNumber: string; passWord?: string; }) => {
document.getElementById(“zmmtg-root”)!.style.display = “block”;
client.join({
sdkKey,
signature: opts.signature, // role in SDK signature needs to be 1
meetingNumber: opts.meetingNumber,
password: opts.passWord || ‘’,
userName: userName,
})
};
return (
<>