ReferenceError：未定义窗口 - Next.js 滑块答案

【问题标题】：ReferenceError: window is not defined - Next.js sliderReferenceError：未定义窗口 - Next.js 滑块
【发布时间】：2021-09-19 09:53:39
【问题描述】：

我无法调试并在 windows 参考错误问题上找到问题。

ReferenceError: window is not defined
    at /home/ubuntu/Desktop/project/my-app/node_modules/@splidejs/splide/dist/js/splide.js:5857:1
    at Object.<anonymous> (/home/ubuntu/Desktop/project/my-app/node_modules/@splidejs/splide/dist/js/splide.js:5858:12)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/ubuntu/Desktop/project/my-app/node_modules/@splidejs/react-splide/dist/js/components/Splide.js:10:38)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)

【问题讨论】：

可能重复？ stackoverflow.com/questions/55151041/…
不，我正在尝试导入一些库，当我在导出中插入该库时：useEffect(() => { import { Splide, SplideSlide } from '@splidejs/react-splide'; }, []) 我收到其他错误消息：导入和导出可能只出现在顶层所以，我在如何导入这些库方面需要帮助？
nextjs.org/docs/advanced-features/dynamic-import 试试这个
@Yunwei.W- 已经看到 - 当我将代码移到那里时，我在 component/hello 中得到错误。我有 2 个对象导入而不是单个对象导入。像“Splide nd SplideSlide”
stackoverflow.com/questions/52939439/…

标签： javascript reactjs next.js

【解决方案1】：

这意味着@splidejs/react-splide 只支持客户端渲染（Next.js 是一个服务器端渲染框架，以防你从未注意到它）。您可以简单检查一下您的网站是否在客户端运行。

类似的东西

<SomeComponent>
  {/* only render <Splide/> if window exists, i.e. on the client side */}
  {window && <Splide />}
  <AnotherComponent />
</SomeComponent>

【讨论】：

我刚刚添加了{window && <Splide />}，但我仍然有错误，因为window 没有定义。
啊，这里有Next具体解决方案：dev.to/vvo/…
不幸的是，我都尝试过 - useEffect 和 typeof 但出现错误，导入应该在页面的根级别。
Import 并不总是必须在顶部。在我附加的示例中，他使用了类似 import("@splidejs/react-splide") 的东西。这是动态导入的语法。
啊！我现在看到了，进口没有价值......谢谢！你能用这些改变更新答案吗，我会接受的。