Question

使用react-leaflet节点模块时，出现窗口未定义的错误，因为它依赖于窗口，并且SSR当然不支持窗口。我发现了next / dynamic，但是，我发现的所有示例都显示了如何导入组件而不是节点模块。是否可以包含节点模块？例如，这就是我要导入的内容，它给出了窗口未定义的错误import { Map, TileLayer, Marker } from 'react-leaflet';

Answer 1

问题在于next.js动态import fails on named exports

看source code of react-leaflet，我可以看到每个命名的导出都可以从特定文件访问，例如import Map from 'react-leaflet/lib/Map'

用dynamic import without SSR

组合

const Map = dynamic(() => import('react-leaflet/lib/Map'), {
  ssr: false
});

这应该为您做个窍门。

Answer 2

当您在组件上调用该依赖项的组件（Map，TileLayer，Marker）时，就会发生该错误。

在服务器端呈现应用程序时出现未定义的窗口，因为窗口对象属于浏览器。

为避免在服务器端发生window of undefined错误，可以在组件中使用process.browser。

ref：https://github.com/zeit/next.js/issues/2473?#issuecomment-362119102

Answer 3

使用动态导入获取命名导出的更好方法是这样做：

const NamedExport = dynamic(() => import('package-name').then((module) => module.NamedExport));

注意：这会将完整的 'package-name' 包分块，然后简单地提取命名导出。如果您能够像接受的示例一样进入模块包，那可能会更好，因为它可能会给您一个较小的块。

Next.js动态导入节点模块

3 个答案: