Getting `ReferenceError: document is not defined` while deploying Next.js project in Vercel

Question

I am working on a Next JS project and I have deployed it to Vercel and at first it was working totally fine and that's why I did'nt check the website status for long time and just developing it locally and pushing into GitHub. Now suddenly I am checked it and getting this 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)
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)

I try to read this and found that something is wrong into this directory

/app/dashboard/page.js

i am sure that i did'nt use the doucment on that perticular file. but i use the doucment in the Navbar.jsx file. here is the code

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])

i use that code to set the body overflow-y hidden when the menu is opend. now i don't know what is causing the error. please help me with that. if you need anything else to know more about the error please let me know.

Edit

I remove all the code that can cause the error (localstorage, window, document) and add the use client to all componenet that can cause the error. I also tried to delete all cache in vercel. And re-deploy it to vercel and i gets the same error.

Now I remove the whole folder /app/dashboard/create and deploy it and now it works.

this is the code i have on that file /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>
  );
};

and the AdminForm @/components/admin/AdminForm (I use this in /app/dashboard/create/page.jsx file) file contains this code

'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>
  );
};

Answer 1

ReactQuill in AdminForm seems to call browser specific APIs at import. And knowing that even client components first render on the server, you are getting that error at build time.

A solution is to import the AdminForm with the dynamic function of Next.js, like so:

// 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>
  );
};