没有服务器端渲染功能的导入模块

【问题标题】：Imported modules without server side rendering feature没有服务器端渲染功能的导入模块
【发布时间】：2021-01-07 13:00:00
【问题描述】：

我对 Next.js 有疑问。当我尝试导入节点模块时，该模块使用window 对象，Next.js 抛出错误：window is not defined。

模块是这样导入的：

import * as widgets from 'survey-widgets';

widgets.autocomplete(Survey);

我猜 Next.js 动态导入在我的情况下不起作用。有什么办法吗？

【问题讨论】：

【解决方案1】：

尝试将所有使用window 或任何其他仅限于浏览器的api 的代码推迟到useEffect 中，因为useEffect 中的代码只能在浏览器中运行。

如果您不能这样做，则创建一个 intermediary 模块，您将使用该模块导入 survey-widgets 并重新导出您需要的内容。所以最后，你动态地导入了 intermediary 模块。

import * as widgets from 'survey-widgets
export default widgets

【讨论】：

【解决方案2】：

对于正在寻找解决方案的任何人，我使用NextJs Dynamic imports with no SSR 解决了它。

我所做的是使用动态导入来导入我的顶级组件，如下所示：

const MyComponent= dynamic(
() => import('../components/hello3'),
  { ssr: false }
)

因此hello3 组件将不再用于服务器端渲染，而是在客户端渲染。

然后像这样使用它：

<MyComponent/>

【讨论】：