问题

I can provide a translation of the code part for you:

我正在为在线视频会议制作一个网络平台，我正在使用 ZEGOCLOUD 作为 API，使用 Next.js，但是当我运行我的程序时，我收到了这个错误：#ReferenceError: document is not defined

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '@/configuration/store/store';
import { interview_interface, UserType } from '@/interface';
import useAuthInterview from '@/configuration/hooks/useAuthInterview';
import { GetInterview } from '@/configuration/slices/interview';
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
import { generatedMeetingID } from '@/functions/generatedMeetingID';

const Index = () => {
    useAuthInterview();
    const dispatch = useDispatch<AppDispatch>();
    const router = useRouter();
    const params = router.query.interviewid;
    const user = useSelector((state: RootState) => state.interviewUser.userInfo);
    const [isAllow, setIsAllow] = useState<boolean>(true);
    const [userLoaded, setUserLoaded] = useState(true);
    const interviews = useSelector((state: RootState) => state.interview.interviews);
    useAuthInterview();
    const users = useSelector((state: RootState) => state.interviewUser.userInfo?.uid);
    useEffect(() => {
        // @ts-ignore
        if (users?.uid) {
            dispatch(GetInterview());
        }
        setUserLoaded(true);
        // @ts-ignore
        const getMeeting = () => {
            if (params?.length && userLoaded) {
                const interviewData = interviews.filter((item: interview_interface) => item.idinterview === params);
                if (interviewData.length) {
                    const iscreator = users;
                    if (interviewData[0].interviewtype === '1-on-1') {
                        // compare avec l'id del 'inviter
                        if (interviewData[0].iduser) {
                            // compare avec la date d'aujourd'hui moment().format('l')
                            if (interviewData[0].interviewdate) {
                                setIsAllow(true);
                            }
                        } else {
                            router.push('/entreprise/interview');
                        }
                    }
                } else {
                    router.push('./appels');
                }
            }
        };
        getMeeting();
    }, [dispatch, userLoaded]);

    const appId = process.env.NEXT_PUBLIC_APPID;
    const serverSecret = process.env.NEXT_PUBLIC_SERVERSECRETE;
    const monInterview = async (element: any) => {
        // @ts-ignore
        const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
            // @ts-ignore
            appId,
            serverSecret,
            interviews[0].idinterview as string,
            // @ts-ignore
            users?.uid ? user : generatedMeetingID(),
            // @ts-ignore
            user.name ? user.name : generatedMeetingID()
        );
        // @ts-ignore
        const zp = await ZegoUIKitPrebuilt.create(kitToken);
        // @ts-ignore
        await zp.joinRoom({
            container: element,
            maxUsers: 50,
            sharedLinks: [{
                name: 'lien personnel',
                url: window.location.origin
            }],
            scenario: {
                mode: ZegoUIKitPrebuilt.VideoConference,
            }
        });
    };
    // @ts-ignore
    return (
        <div>
            <div ref={monInterview}>
            </div>
        </div>
    );
};

export default Index;

Please note that code translation might not cover all aspects, and you might need to adjust some parts depending on your specific requirements and environment.

import React, {useEffect, useState} from 'react';
import {useRouter} from "next/router";
import {useDispatch, useSelector} from "react-redux";
import {AppDispatch, RootState} from "@/configuration/store/store";
import {interview_interface, UserType} from "@/interface";
import useAuthInterview from "@/configuration/hooks/useAuthInterview";
import {GetInterview} from "@/configuration/slices/interview";
import {ZegoUIKitPrebuilt} from "@zegocloud/zego-uikit-prebuilt";
import {generatedMeetingID} from "@/functions/generatedMeetingID";
const Index = () => {
useAuthInterview()
const dispatch = useDispatch<AppDispatch>();
const router=useRouter()
const params=router.query.interviewid
const user=useSelector((state: RootState) => state.interviewUser.userInfo)
const [isAllow,setIsAllow]=useState<boolean>(true);
const [userLoaded,setUserLoaded]=useState(true)
const interviews = useSelector((state: RootState) => state.interview.interviews);
useAuthInterview()
const users = useSelector((state: RootState) => state.interviewUser.userInfo?.uid);
useEffect(() => {
// @ts-ignore
if (users?.uid) {
dispatch(GetInterview())
}
setUserLoaded(true)
// @ts-ignore
const getMeeting=()=>{
if ((params?.length && userLoaded)) {
const interviewData = interviews.filter((item: interview_interface) => item.idinterview === params)
if (interviewData.length){
const iscreator=users
if (interviewData[0].interviewtype==='1-on-1'){
// compare avec l'id del 'inviter
if (interviewData[0].iduser){
// compare avec la date d'aujourdhui moment().format('l')
if (interviewData[0].interviewdate){
setIsAllow(true)
}
}else{
router.push('/entreprise/interview')
}
}
}
else{
router.push('./appels')
}
}
}
getMeeting()
}, [dispatch,userLoaded])
const appId = process.env.NEXT_PUBLIC_APPID
const serverSecret = process.env.NEXT_PUBLIC_SERVERSECRETE
const monInterview=async (element:any)=>{
// @ts-ignore
const kitToken=ZegoUIKitPrebuilt.generateKitTokenForTest(
// @ts-ignore
appId,
serverSecret,
interviews[0].idinterview as string,
// @ts-ignore
users?.uid? user:generatedMeetingID(),
// @ts-ignore
user.name?user.name:generatedMeetingID()
);
// @ts-ignore
const zp=await ZegoUIKitPrebuilt.create(kitToken)
// @ts-ignore
await zp.joinRoom({
container: element,
maxUsers: 50,
sharedLinks: [{
name: "lien personnel",
url: window.location.origin
}],
scenario: {
mode: ZegoUIKitPrebuilt.VideoConference,
}
})
}
// @ts-ignore
return (
<div>
<div ref={monInterview}>
</div>
</div>
);
};
export default Index;

答案1

得分: 0

Next.js 是服务器端框架，因此文档不可用于服务器端。
你可以像这样导入。

import { useEffect } from "react";

export default function YourComponent() {
   useEffect(() => {
     import("zego-express-engine-webrtc").then(({ ZegoExpressEngine }) => {
     // 使用 ZegoExpressEngine 的代码
     });
    }, []);

   // 组件的其余部分代码
}

import { useEffect } from "react";
export default function YourComponent() {
useEffect(() => {
import("zego-express-engine-webrtc").then(({ ZegoExpressEngine }) => {
// Your code that uses ZegoExpressEngine
});
}, []);
// Rest of your component code
}

答案2

得分: 0

感谢您的回答，它确实对我有帮助，但我只是解构了导入。

const { ZegoUIKitPrebuilt } = await import("@zegocloud/zego-uikit-prebuilt");

 const {ZegoUIKitPrebuilt} = await import("@zegocloud/zego-uikit-prebuilt");