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

Youssouf Oumar · Accepted Answer · 2024-02-06 15:23:36Z

3

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

answered Feb 6, 2024 at 15:23

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raheesh Kattumunda Muhamed · Accepted Answer · 2025-03-13 04:28:01Z

0

Dynamic imports as well as document check in useEffect didn't work for me.

This worked:

Upgrading NodejS version to 20.x in Vercel Env.

I added "engine": { "node" : "20.x" } in package.json, and NODE_VERSION => 20 into Vercel environment variables. Hope this helps..!

answered Mar 13 at 4:28

Raheesh Kattumunda Muhamed

12 bronze badges

Comments

AB Web Dev · Accepted Answer · 2024-02-06 12:38:54Z

-1

In nextJs some time client component is act as server component at initial point. you can check document is ready or not before accessing it.

useEffect(() => {
    if (typeof document !== "undefined") {
        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]);

answered Feb 6, 2024 at 12:38

AB Web Dev

1065 bronze badges

2 Comments

Ahmed Abdelbaset Over a year ago

"In nextJs some time client component is act as server component at initial point. you can check document is ready or not before accessing it" is not accurate. SSR is not a Server Component.

Muhammad Hossain Over a year ago

Thanks mate but i tried it also.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related