Next.js 在使用“agora-rtc-sdk-ng”包时抛出错误“未定义窗口”答案

【问题标题】：Next.js throw an error "window is not defined" while using "agora-rtc-sdk-ng" packageNext.js 在使用“agora-rtc-sdk-ng”包时抛出错误“未定义窗口”
【发布时间】：2022-01-08 19:54:54
【问题描述】：

我正在尝试使用 next.js 和 typescript 实现“agora-rtc-sdk-ng”包进行直播。

import AgoraRTC from 'agora-rtc-sdk-ng';

导入这个会引发如下错误：

根据其他 stackoverflow 答案，我尝试使用下一个/动态。但没有运气。如果有人在 next.js 中使用了“agora-rtc-sdk-ng”，请帮助我。

【问题讨论】：

你在哪里导入AgoraRTC？我的猜测是您正在将getStaticProps 或getStaticPaths 中的某处的服务器端代码与试图访问window 对象的客户端代码混合在一起。请添加显示导入用法的最少代码。你也不能在上面提到的那些服务器端方法中访问window对象。
是的，我正在尝试直接导入包页面文件。有什么方法可以导入和使用 window 对象？
理论上，您可能会在代码运行“服务器端”时尝试访问window 对象，即您可能正在调用getStaticProps 或getStaticPaths 中的函数，而这又依赖于窗口对象。它可能来自集市，我不确定。我不熟悉那个包。此外，您可能已经知道这一点，但为了完整起见，nextjs 在“服务器端”和“浏览器端”都运行。当它在“服务器端”运行时，您可以使用节点或服务器特定的包，如 fs、path 等，但不能使用或访问 window 对象，反之亦然。
这是否回答了您的问题：Why am I getting ReferenceError: self is not defined when I import a client-side library?？请改用常规动态导入。 next/dynamic 仅用于 React 组件。

标签： typescript next.js agora.io agora-web-sdk-ng

【解决方案1】：

您可以像这样使用动态导入：

import dynamic from 'next/dynamic'

const App = dynamic(import('./Videocall'), { ssr: false });

Videocall 组件随后可以使用 SDK。

【讨论】：