NextJS：即使使用 useEffect，仍然触发“窗口未定义”错误

Question

我正在尝试在我的 NextJS 应用程序中集成 JS 库，但是加载页面时我总是在服务器端收到以下错误：

ReferenceError: window is not defined

我不明白为什么会发生这种情况，因为我在 useEffect 挂钩中使用这个库。除此之外，我还通过在窗口对象上放置一个条件来加强它（这不是必需的）。

import { Draggable } from "@shopify/draggable";
import { useEffect, useRef } from "react";

type DraggableItemListProps = {
    children: React.ReactNode
}

export default function DraggableItemList({children}: DraggableItemListProps) {
    const container = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!container.current || typeof window === 'undefined') {
            return;
        }

        const draggable = new Draggable(container.current, {
            draggable: '.draggable',
            handle: '.draggable-handle'
        });

        return () => {
            draggable.destroy();
        }
    }, [children])

    return (
        <div ref={container}>{children}</div>
    )
}

如果我删除 useEffect 中的所有内容，并且我只是以任何方式使用 window 对象，它就可以正常工作。 有人可以告诉我我错过了什么吗？

谢谢你。

Answer 1

您面临的问题是因为 NextJS 进行服务器端渲染，所以窗口对象仅适用于客户端渲染。尝试在窗口对象代码中进行以下调整：

if（窗口类型！=='未定义'）{ // 在这里执行客户端操作