next.js - 没有服务器端渲染功能的导入模块

Question

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

模块是这样导入的：

import * as widgets from 'survey-widgets';

widgets.autocomplete(Survey);

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

Answer 1

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

如果你不能这样做，那么制作一个intermediary模块，你将使用它来导入survey-widgets和重新导出你需要的东西。所以最后，你intermediary动态地导入了那个模块。

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

Answer 2

对于正在寻找解决方案的任何人，我使用NextJs 动态导入解决了它，没有 SSR。

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

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

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

然后像这样使用它：

<MyComponent/>