Next.js 的动态导入节点模块

Question

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

Answer 1

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

Window 未定义发生在您的应用程序在服务器端呈现时，因为 window 对象属于浏览器。

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

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

Answer 2

问题是 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 3

通过动态导入获取命名导出的更好方法是：

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

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

Next.js 的动态导入节点模块

Dynamic Import Node Module With Next.js

javascript

next.js