我正在做下一个JS项目,我已经将它部署到Vercel上,一开始它工作得很好,这就是为什么我很长时间没有判断网站状态,只是在本地开发它,并将其推向GitHub.现在突然我被判断了一下,发现了这个错误.

ReferenceError: document is not defined
    at t.exports.r.INSERT (/vercel/path0/.next/server/app/dashboard/create/page.js:1:160188)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:43298)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:125932)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:196459)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at Object.<anonymous> (/vercel/path0/.next/server/app/dashboard/create/page.js:1:239478)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
Error occurred prerendering page "/dashboard/create". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: document is not defined
    at t.exports.r.INSERT (/vercel/path0/.next/server/app/dashboard/create/page.js:1:160188)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:43298)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:125932)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at t.exports.Object.defineProperty.value (/vercel/path0/.next/server/app/dashboard/create/page.js:1:196459)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)
    at Object.<anonymous> (/vercel/path0/.next/server/app/dashboard/create/page.js:1:239478)
    at r (/vercel/path0/.next/server/app/dashboard/create/page.js:1:27485)

我试着阅读这篇文章,发现这个目录有问题

/app/dashboard/page.js

我敢肯定我没有在那把指尖上用过涂抹.但我使用的是Navbar.jsx文件中的覆盖.以下是代码

const [toggle_icon, set_toggle_icon] = useState(faBarsStaggered);

useEffect(() => {
        if (toggle_icon == faBarsStaggered) {
            menuRef.current.style.left = "-110%"
            document.body.style.overflowY = 'scroll'
        } else {
            menuRef.current.style.left = "0"
            document.body.style.overflowY = 'hidden'
        }
    }, [toggle_icon])

当菜单打开时,我使用该代码设置Body Overflow-y隐藏. 现在我不知道是什么导致了这个错误.请帮我拿一下那个. 如果您需要任何其他信息来了解更多有关错误的信息,请让我知道.

Edit

我删除了所有可能导致错误的代码(localstorage、window、document),并添加了 use client 所有可能导致错误的组件.我还试图删除所有缓存在vercel.并将其重新部署到vercel,我得到相同的错误.

现在我移走整个文件夹 /app/dashboard/create个 然后部署它,现在它起作用了.

这是我在那个文件/app/dashboard/create/page.jsx上的代码

'use client'

// pages/create-post.js
import React from 'react';
import AdminForm from '@/components/admin/AdminForm';

export default function CreatePostPage() {
  return (
    <div>
      <h1>Create a New Post</h1>
      <AdminForm />
    </div>
  );
};

AdminForm @/components/admin/AdminForm(我在/app/dashboard/create/page.jsx文件中使用它)文件包含以下代码

'use client'

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export default function AdminForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  // Handle title change
  const handleTitleChange = (e) => {
    setTitle(e.target.value);
  };

  // Handle content change
  const handleContentChange = (value) => {
    setContent(value);
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    // You can perform actions like saving the title and content to the database here
  };

  return (
    <div>
      {/* Title input field */}
      <input
        type="text"
        value={title}
        onChange={handleTitleChange}
        placeholder="Enter title"
      />

      {/* Text editor for content */}
      <ReactQuill
        theme="snow"
        value={content}
        onChange={handleContentChange}
        placeholder="Enter content"
      />

      {/* Submit button */}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

推荐答案

AdminForm中的ReactQuill似乎在导入时调用特定于浏览器的API.知道了even client components first render on the server,您就会在构建时收到这个错误.

一种解决方案是使用Next.js的dynamic函数导入AdminForm,如下所示:

// pages/create-post.js

const AdminForm = dynamic(() => import("./AdminForm"), {
  ssr: false,
});

export default function CreatePostPage() {
  return (
    <div>
      <h1>Create a New Post</h1>
      <AdminForm />
    </div>
  );
};

Javascript相关问答推荐

如何分配类型脚本中具有不同/额外参数的函数类型

如何避免移动设备中出现虚假调整大小事件?

使用续集和下拉栏显示模型属性

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

将自定义排序应用于角形数字数组

在nextjs服务器端api调用中传递认证凭证

MathJax可以导入本地HTML文档使用的JS文件吗?

处理时间和字符串时MySQL表中显示的日期无效

无法检测卡片重叠状态的问题

material UI按钮组样式props 不反射

当使用';字母而不是与';var#39;一起使用时,访问窗口为什么返回未定义的?

Puppeteer上每页的useProxy返回的不是函数/构造函数

如何限制显示在分页中的可见页面的数量

打字脚本中方括号符号属性访问和拾取实用程序的区别

基于产品ID更新条带产品图像的JavaScript命中错误

MongoDB中的嵌套搜索

如何修复错误&语法错误:不能在纯react 项目中JEST引发的模块&之外使用导入语句?

为什么这个最小Angular 的Licial.dev设置不起作用?

如何使pdf.js上的文本呈现为可选?

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但GET:Object.在Reaction项目中