我正在做下一个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>
);
};