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

Question

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

模块是这样导入的：

import * as widgets from 'survey-widgets';

widgets.autocomplete(Survey);

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

Answer 1

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

如果您做不到，那么制作一个 intermediary 模块，您将使用它来导入 survey-widgets 并重新导出您需要的内容。所以最后，您动态导入 intermediary 模块。

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

Answer 2

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

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

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

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

然后就这样使用它：

<MyComponent/>

Imported modules without server side rendering feature