nextjs dynamic()import可以在开发模式下工作,但不能在生产模式下工作,Nextjs13 pages dir #45582

oxcyiej7  于 2023-02-08  发布在  其他
关注(0)|答案(1)|浏览(127)

我有一个应用程序与nextjs 13 pages dire。我正在使用zoom网络sdk嵌入会议。它在dev模式下工作得很好。
问题是:

  • 当我构建应用程序时,除了zoom组件在构建后没有显示之外,一切都正常工作,
  • 访问/meeting页面时,组件不存在。
const ZoomCall = dynamic(() => import("@components/Zoom/ZoomCall"), {
  ssr: false,
  loading: () => "Loading...",
});

变焦呼叫

import { useEffect } from "react";
import dynamic from "next/dynamic";
import { ZoomMtg } from "@zoomus/websdk";
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";

import ZoomInputs from "./ZoomInputs";
import { useState } from "react";
import useTranslation from "next-translate/useTranslation";

export default function ZoomCall({
  user,
  meetingNumber,
  setMeetingnumber,
  passWord,
  setMeetingPassword,
}) {
  const { t } = useTranslation();
  const [isComponentMounted, setIsComponentMounted] = useState(false);

  const signatureEndpoint = "/api/zoom/signature";

  const role = 0;
  useEffect(() => {
    ZoomMtg.setZoomJSLib("https://source.zoom.us/1.9.1/lib", "/av");
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
  }, []);

  function getSignature(e) {
    e.preventDefault();

    fetch(signatureEndpoint, {
      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) {
    let meetingSDKElement = document.getElementById("meetingSDKElement");
    const client = ZoomMtgEmbedded.createClient();
    // document.getElementById("zmmtg-root").style.display = "block";

    client.init({
      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: "en-US",
      customize: {
        meetingInfo: [
          "topic",
          "host",
          "mn",
          "pwd",
          "telPwd",
          "invite",
          "participant",
          "dc",
          "enctype",
        ],
        toolbar: {
          buttons: [
            {
              text: "Custom Button",
              className: "CustomButton",
              onClick: () => {
                console.log("custom button");
              },
            },
          ],
        },
      },
    });

    client.join({
      sdkKey: process.env.NEXT_PUBLIC_ZOOM_API_KEY,
      signature: signature,
      meetingNumber: meetingNumber,
      password: passWord,
      userName: "..",
      userEmail: "ah....",
    });
  }

  return (
    <div>
      <div id="meetingSDKElement"></div>
      <button onClick={getSignature}>Join Meeting</button>
    </div>
  );
}

我已将导出移动到index文件

import dynamic from "next/dynamic";

export default dynamic(() => import("./ZoomCall"), { ssr: false });

这个问题仍然悬而未决

qpgpyjmq

qpgpyjmq1#

我已设法解决这个问题,方法是更改:

const ZoomCall = dynamic(() => import("@components/Zoom/ZoomCall"), {
  ssr: false,
  loading: () => "Loading...",
});

变成

export default dynamic(() => import("./ZoomCall").then((mod) => mod.ZoomCall), {
  ssr: false,
});

而且效果很好

相关问题