Javascript 使用Next.js动态导入节点模块

Javascript 使用Next.js动态导入节点模块,javascript,next.js,Javascript,Next.js,我在使用react传单节点模块时遇到一个错误,即window undefined,因为它依赖于window,当然SSR不支持window。我找到了next/dynamic,但是,我找到的所有示例都显示了如何导入组件而不是节点模块。是否可以包括节点模块?如果可以,如何包括?作为一个例子,这就是我正在导入的内容,它给出了窗口未定义的错误import{Map,tillelayer,Marker}来自“react-lipper”当您在组件上调用依赖项的组件(映射、TileLayer、标记)时,发生了该错

我在使用react传单节点模块时遇到一个错误,即window undefined,因为它依赖于window,当然SSR不支持window。我找到了next/dynamic,但是,我找到的所有示例都显示了如何导入组件而不是节点模块。是否可以包括节点模块?如果可以,如何包括?作为一个例子,这就是我正在导入的内容,它给出了窗口未定义的错误
import{Map,tillelayer,Marker}来自“react-lipper”

当您在组件上调用依赖项的组件(映射、TileLayer、标记)时,发生了该错误

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

为了避免服务器端未定义的
窗口出现错误,您可以在组件中使用
process.browser


ref:

问题在于next.js是动态的

查看,我可以看到每个命名的导出都可以从特定的文件中访问,例如,
import Map from'react-lipper/lib/Map'

结合


这应该对您有所帮助。

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

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

注意:这将分块完整的
'package-name'
包,然后只提取命名的导出。如果您能够像公认的示例那样进入模块包,这可能会更好,因为它可能会给您一个更小的块。

Hi@iurii,我面临同样的问题,除了在next.js中使用three.js。我想加载名为的示例模块,我想像导入useEffect函数中的es6模块一样导入它。我曾尝试在useEffect函数中使用动态导入而不使用ssr(或者我不确定是否必须在开始时使用它,然后在useEffect中以某种方式调用它)。我的问题是,它是一个我需要导入的构造函数对象,那么我如何像一个构造函数一样使用它而不是一个react组件呢?这是nextjs自述文件上动态导入功能的最新链接。这不是一个适用于每个模块的解决方案。next不支持它吗?这是一个关键功能。获取命名导出的更好方法是
dynamic(()=>import('package-name')。然后((module)=>module.NamedExport))
来自@WillP的答案。答案应该是正确的
const NamedExport = dynamic(() => import('package-name').then((module) => module.NamedExport));