在 nextjs 中从“agora-rtc-sdk-ng”导入 AgoraRTC 时未定义窗口答案

【问题标题】：window not defined while import AgoraRTC from 'agora-rtc-sdk-ng' in nextjs在 nextjs 中从“agora-rtc-sdk-ng”导入 AgoraRTC 时未定义窗口
【发布时间】：2021-05-26 13:12:05
【问题描述】：

我在导入 agora.io 时收到一个错误窗口未定义。

【问题讨论】：

看起来 Next 正在尝试做 SSR，你将无法使用 Agora SDK 进行服务器端渲染

标签： next.js agora.io

【解决方案1】：

AGORA 使用“window”对象，它是客户端对象，Next JS 在服务器端呈现。因此，您需要使用“动态”进行客户端渲染。通过 Dynamic，您可以在客户端导入文件，这样它就可以工作了。

您应该复制整个 Agora 代码并将其放入文件中。
例如，在我的例子中，我把它放在“../components/agoraclientside.js”
所以在我的 index.js 文件中我写了：

import dynamic from "next/dynamic";

const ClientSideControls = dynamic(
  () => {
    return import("../components/agoraclientside");
  },
  { ssr: false }
);

然后在你的返回函数中使用<ClientSideControls />

【讨论】：

【解决方案2】：

请按如下所示导入

    const AgoraRTC = (await import('agora-rtc-sdk-ng')).default
   }

【讨论】：