nextjs dynamic() import works in dev mode, but not the production, Nextjs13 pages dir #45582

Question

I have an app with nextjs 13 pages dire. i am using zoom web sdk for embed the meetings. it works just fine in the dev mode.

the proplem:

• when i build the app everything working except that zoom component not showing up after build,
• when visiting the /meeting page the component didn't exist.

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

the ZoomCall

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>
  );
}

I have moved the exports to a index file the export

import dynamic from "next/dynamic";

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

the issue in still

Answer 1

i have managed to solve this by changing the :

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

into

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

and it works just fine