Next.js Discord

Discord Forum

Help Needed: Prerendering Error in Next.js

Unanswered
Sloth bear posted this in #help-forum
Open in Discord
Avatar
Sloth bearOP
I'm encountering a recurring issue during the build process of my Next.js app (version 14.2.15). Several pages fail to prerender, throwing the following error: 
 
Error occurred prerendering page "/monitoring". Read more: https://nextjs.org/docs/messages/prerender-error 

ReferenceError: document is not defined
    at createTag (/home/globalas/repositories/gcu-web/.next/server/chunks/9258.js:1:8255)
    at /home/globalas/repositories/gcu-web/.next/server/chunks/9258.js:1:21086
    at /home/globalas/repositories/gcu-web/.next/server/chunks/9258.js:1:21209
    at /home/globalas/repositories/gcu-web/.next/server/chunks/9258.js:1:24004
Details:
Error occurs during prerendering of the following pages:

/register
/forgottenPassword
/monitoring
Multiple protected routes like /dashboard, /products, /settings, etc.
Environment:

Running in production mode (NODE_ENV=production).
Using Parallel Routes and Route Groups for different roles (@admin, @agent, @public).
Build Command: npm run build

Steps Already Taken:
Tried using dynamic imports with { ssr: false } for components suspected to access document or window.

28 Replies

Avatar
Singapura
@Sloth bear have you solved the error I am also facing same error even though I have tried on just this page 

const Page = () => {
  return <div>some page</div>;
};

export default Page;


Gives this error

ReferenceError: document is not defined
    at createTag (/vercel/path0/.next/server/chunks/9245.js:1:9467)
    at /vercel/path0/.next/server/chunks/9245.js:1:22355
    at /vercel/path0/.next/server/chunks/9245.js:1:22478
    at /vercel/path0/.next/server/chunks/9245.js:1:25303
    at /vercel/path0/.next/server/chunks/9245.js:1:9132
    at 60496 (/vercel/path0/.next/server/chunks/9245.js:1:9136)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
    at 19245 (/vercel/path0/.next/server/chunks/9245.js:1:106)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
    at 44609 (/vercel/path0/.next/server/app/dashboard/requests/page.js:1:12145)


Nextjs version: 14.2.13

When I run build command locally does not gives any build errors and when I try to deploy on vercel gives the build error
Avatar
Polar bear
Also facing the same issue
Avatar
Singapura
Hi
I found the solution that works for me

I have removed the error.tsx then it does not give the error as soon as i add error.tsx file then give the build error on vercel but work fine on local

My folder structure was
app
  |-> dashboard
    |-> my-request
        |-> page.tsx
        |-> loading.tsx
        |-> error.tsx


My current folder structure is
  |-> dashboard
    |-> my-request
        |-> page.tsx
        |-> loading.tsx


content of error.tsx file was
//error.tsx
use client'; // Error components must be Client Components
import Lottie from 'lottie-react';
import Link from 'next/link';
import { useEffect } from 'react';
import errorAnimation from '@/assets/lottie-json/error-animation-min.json';
import { Button } from '@/components/ui/button';
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);
  return (
    <div className="container py-10">
      <div className="mx-auto max-w-lg">
        <Lottie animationData={errorAnimation} loop />
      </div>
      <div className="mt-4 space-y-5 text-center">
        <p className="text-lg font-semibold text-red-600">
          {error.message || 'Something went wrong. Please try again later.'}
        </p>
        <div className="flex items-center justify-center gap-3">
          <Button size="sm" onClick={() => reset()}>
            Try again
          </Button>
          <Button asChild variant={'secondary'} size={'sm'}>
            <Link href={'/'}>Go to home page</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}
and i am using nextjs version
14.2.13
Avatar
Singapura
@European pilchard Can you provide a valid reason why it gives a build error when adding the error.tsx file?
Avatar
European pilchard
I don't know how much you googled or what you've trued, but I found this github issue, it looks like a problem with the lottie-react module, so try to take a look at this: https://github.com/Gamote/lottie-react/issues/101

It also looks like it was fixed two days ago by making the module compatible with node 22, so maybe try updating it.
Avatar
James4u
@Sloth bear it's because you are using document inside your page.
When your page is pre-rendered on the server, there is no windows or document
you need to use next/dynamic with ssr: false
to disable pre-render your pages
Avatar
James4u
or move your logic that uses document inside useEffect()
Avatar
Rough harvester ant
Hey @James4u im with Emiliano doing the depploy, the thing is, that it is deployed on vercel it works fine, and the error is in every page, this cant be right because the app uses client components almost in every page

Export encountered errors on following paths: /(auth)/forgottenPassword/page: /forgottenPassword /(auth)/login/page: /login /(auth)/register/page: /register /(protected)/agentsActivity/@admin/page: /agentsActivity /(protected)/calls/page: /calls /(protected)/callsManagments/@agent/page: /callsManagments /(protected)/campaigns/@admin/page: /campaigns /(protected)/campaignsActivity/@admin/page: /campaignsActivity /(protected)/companies/page: /companies /(protected)/dashboard/page: /dashboard /(protected)/leads/@admin/page: /leads /(protected)/lots/@admin/page: /lots /(protected)/notCall/@admin/page: /notCall /(protected)/payMethod/@admin/page: /payMethod /(protected)/plans/page: /plans /(protected)/preSales/page: /preSales /(protected)/products/page: /products /(protected)/settings/page: /settings /(protected)/users/page: /users /(public)/monitoring/page: /monitoring /_not-found/page: /_not-found
Avatar
Rough harvester ant
nope, its not, its just a call-center software
its actually very basic
Avatar
James4u
not sure how you use document in your page
Avatar
Rough harvester ant
im not using it, i only use useRef when i need smthg with that, so, for me its not a code problem, its something with the server

and i cant share you the code cause its private (work)
Avatar
James4u
I can't guess more than it from this log ReferenceError: document is not defined
as you are getting erros while pre-rendering
and you got above error message - meaning it tries to use document while pre-rendering on the server where document or window doesn't exist
Avatar
Rough harvester ant
HEY!, found it, it wasnt the code it was node, the vps was on the version 22.11.0 of nodejs, and my machine was in 20.17.0, soo i just downgrade the node version and it worked, im not an engineer so i dont know why this happens, i just found the solution for the project.

here you have the issue
https://github.com/Gamote/lottie-react/issues/101
Emiliano says it was maybe the lottie package, but i dont think so, as i tried to remove it entirely from the project and doesnt worked
Avatar
James4u
https://tenor.com/Z5WO.gif
Avatar
@James4u https://tenor.com/Z5WO.gif
Avatar
Sloth bearOP
JAJAJAJA
I am implementing it for this very reason