Next.js动态导入节点模块

Question

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

Answer 1

通过动态导入获取命名导出的更好方法是执行以下操作：

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

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

Answer 2

问题是next.js动态导入在命名导出上失败

查看react-leaflet的源代码，我可以看到可以从特定文件访问每个命名的导出，例如import Map from 'react-leaflet/lib/Map'

结合使用动态导入而不使用SSR

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

这应该对您有用。