文档准备好时导入 npm (ReactJS/Next.js)

Posted 2023-02-22

【中文标题】文档准备好时导入 npm (ReactJS/Next.js)

【英文标题】：Import npm when document is ready (ReactJS/Next.js)

【发布时间】：2021-06-02 03:46:33

【问题描述】：

我正在尝试使用这个名为 float-sidebar.js 的小型 js 库，我已经通过 npm 安装了该模块，但我注意到在反应中它会抛出错误 "window" not defined，因为里面使用了 "window"模块内的代码 float-sidebar.min.js 不检查窗口是否已加载或准备好。

由于我使用的是 Next.js，因此我尝试像这样动态加载模块：

import dynamic from 'next/dynamic'
const FloatSidebar = dynamic(
  () => import('float-sidebar'),
   s-s-r: false 
)

这样做不会再抛出“window”未定义错误，但它会说FloatSidebar 在我的代码中稍后不是函数：

const handleScroll = () => 

    const sidebar = document.querySelector('.sidebar');
    const relative = document.querySelector('.content');

    const floatSidebar = FloatSidebar(
      sidebar: sidebar,
      relative: relative,
      topSpacing: 40,
      bottomSpacing: 40
    );

    floatSidebar.forceUpdate();
  

【问题讨论】：

这是否有助于回答您的问题：Why am I getting ReferenceError: self is not defined in Next.js when I try to import a client-side library??

@juliomalves 差不多，我也想到了组件技巧问题是我要导入的不是组件而是函数，是从该模块 .js 文件导出的

我链接的问题也是这样。

【参考方案1】：

您可以在handleScroll 回调中简单地在float-sidebar 上使用常规的ES2020 dynamic import。

const handleScroll = () => 
    const sidebar = document.querySelector('.sidebar');
    const relative = document.querySelector('.content');
    
    const FloatSidebar = (await import('float-sidebar')).default;
    const floatSidebar = FloatSidebar(
      sidebar: sidebar,
      relative: relative,
      topSpacing: 40,
      bottomSpacing: 40
    );
    floatSidebar.forceUpdate();