时间戳

首页 > 解决方案 > NextJS - 引用错误：文档未定义

javascript - NextJS - 引用错误：文档未定义

问题描述

我正在运行 NextJS v11.1.12，并且正在尝试运行一个标准的 Vanilla JS 函数，该函数使用“state-select-dropdown-box”类切换 div 的 CSS 类。我的代码是：

const Header = () => {

const dropDownMenu = document.querySelector('state-select-dropdown-box');
console.log(dropDownMenu);

function toggleMenu() {
    dropDownMenu.classList.toggle('show');
}

return ( <Component /> );
}

当应用程序编译时，我得到“参考错误：文档未定义”。奇怪的是，我今天早些时候运行了这些功能，没有任何问题，也没有改变任何东西。

经过一些大规模的谷歌搜索和研究，我得出的结论是，也许我只是不了解 NextJS 中的 SSR 是如何工作的？谁能解释或阐明为什么我没有达到我期望的结果以及如何解决这个问题？

标签： javascriptreactjsnext.js

解决方案

@Surjeet Bhadauriya 的回答在技术上是正确的，但是 next.js 提供了动态加载组件的内置功能，实际上next/dynamic您可以在没有SSR.
从文档：

您可能并不总是希望在服务器端包含一个模块。例如，当模块包含仅在浏览器中工作的库时。

const Header = () => {

const dropDownMenu = document.querySelector('state-select-dropdown-box');
console.log(dropDownMenu);

function toggleMenu() {
    dropDownMenu.classList.toggle('show');
}

return ( <Component /> );
}
export default Header

然后在您的页面（或您导入它的任何地方）：

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/Header'),
  { ssr: false } // <-- not including this component on server-side
)

推荐阅读