next.js: Error occurred prerendering page - 14.0.2+

Same here, but I’m using also lottie-react at this component:

FourOhFour Component

'use client';
import Link from 'next/link';
import { FourOhFourContainer } from '../../../../styles/globalStyles';
import { useLottie } from 'lottie-react';
import { Button } from '@nextui-org/react';

export default function FourOhFour() {
	const options = {
		loop: true,
		autoplay: true,
		path: 'https://assets7.lottiefiles.com/packages/lf20_u1xuufn3.json',
	};
	const { View } = useLottie(options);
	return (
		<FourOhFourContainer>
			<h1 style={{ marginTop: '2em' }}>Page Not Found</h1>
			<div className="lottie">{View}</div>
			<Link href="/">
				<Button size="xl" color="secondary" variant="ghost">
					Zurück
				</Button>
			</Link>
		</FourOhFourContainer>
	);
}

Error at build inside Docker 🐳

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error                                                                                                      
│ ┃ ReferenceError: document is not defined                                                                                                                                                                          
│ ┃     at createTag (/app/.next/server/chunks/448.js:1:8065)                                                                                                                                                        
│ ┃     at /app/.next/server/chunks/448.js:1:23192                                                                                                                                                                   
│ ┃     at /app/.next/server/chunks/448.js:1:23322                                                                                                                                                                   
│ ┃     at /app/.next/server/chunks/448.js:1:26694                                                                                                                                                                   
│ ┃     at /app/.next/server/chunks/448.js:1:7724                                                                                                                                                                    
│ ┃     at 24521 (/app/.next/server/chunks/448.js:1:7729)                                                                                                                                                            
│ ┃     at __webpack_require__ (/app/.next/server/webpack-runtime.js:1:146)                                                                                                                                          
│ ┃     at 35133 (/app/.next/server/chunks/448.js:1:552)                                                                                                                                                             
│ ┃     at __webpack_require__ (/app/.next/server/webpack-runtime.js:1:146)                                                                                                                                          
│ ┃     at 10162 (/app/.next/server/chunks/558.js:1:565)

We’re still experiencing this issue on the latest canary release, so no changes yet I’m afraid.

Im getting something very similar. Notice how its complaining about route /_not-found. However, in my project, and likely your project, does not have any route /_not-found. Per Next js docs, custom not_found pages are either in routes /[…not-found] or directly /not-found. No idea where this error is coming from

same error on 14.1.3 for us: during the build

ReferenceError: Cannot access ‘u’ before initialization

Trying to deploy to vercel. I’m using NX as monorepo and a next project. Basically when I am trying to merge and deploy my new branch I’m getting:

Still the same error on 14.1.3 for us.

We have got round the issue as we identified a code path that could result in one of our Contexts returning null when it shouldn’t, however this was not a problem prior to 14.0.2.

For a workaround you can import as dynamic with ssr: false prop:

// import FourOhFour from '@/app/[locale]/_components/notFound/notFound.component';
import dynamic from 'next/dynamic';

const DynamicNotFound = dynamic(
	() => import('./[locale]/_components/notFound/notFound.component'),
	{ ssr: false }
);

export default function NotFound() {
	return <DynamicNotFound />;
}

Was also getting this error on 14.2.1, had to downgrade to 14.1.4 and it is now working, not able to identify the source of the issue unfortunately other than it being on our “/” route

Could anyone still having troubles with this error provide a minimal reproduction with next@canary? The reproduction linked in the issue keeps updated. It looks like sth failed during static generation for the default built-in 404 page, but still depends on your case.

Same here, it builds locally, but when i deploy to azure devops i get:

Error occurred prerendering page "/default/404". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: Cannot access 'u' before initialization
    at Object.ZP (/var/devops/agent08/_work/546/s/frontend/apps/front/.next/server/chunks/418.js:1:685)
    at /var/devops/agent08/_work/546/s/frontend/apps/front/.next/server/chunks/890.js:1:192
    at o.a (/var/devops/agent08/_work/546/s/frontend/apps/front/.next/server/webpack-runtime.js:1:879)
    at 66890 (/var/devops/agent08/_work/546/s/frontend/apps/front/.next/server/chunks/890.js:1:82)
    at Function.o (/var/devops/agent08/_work/546/s/frontend/apps/front/.next/server/webpack-runtime.js:1:128)

i’m using "next": "^14.1.4"

It is working when I build locally but inside Docker I still get the same error and need to use the workaround with next/dynamic and set SSR to false 😭

I can confirm it is working now with v14.1.3. I set my NODE_ENV in my Dockerfile always to production so this was not my fix. So I don’t know why it is working now, but if you guys don’t face any errors we can close this issue 🚀

I am facing this issue, it happens in builds on a local machine but not on Vercel CI. I could not find the reason yet.

I am not facing this issue anymore in the latest NextJS version.

I am facing this issue, it happens in builds on a local machine but not on Vercel CI. I could not find the reason yet.

Try to console.log the response. I guess you dont hit the end endpoint or something similar and response.json() throws error. During build time nextjs prerenders the app and run it. At this time it using some url and this url is not the url you think probably.

I was using useSearchParams inside my Home component and I wrapped it using Suspense and it was fixed

import { Suspense } from 'react'
import Home from '../components/Home'

export default function Page() {
  return (
    <Suspense>
      <Home />
    </Suspense>
  )
}

i meet the same error, but when I am using NODE_ENV=production and rebuild, the error is disappear

For a workaround you can import as dynamic with ssr: false prop:

// import FourOhFour from '@/app/[locale]/_components/notFound/notFound.component';
import dynamic from 'next/dynamic';

const DynamicNotFound = dynamic(
	() => import('./[locale]/_components/notFound/notFound.component'),
	{ ssr: false }
);

export default function NotFound() {
	return <DynamicNotFound />;
}

this one works for me

I have been encountering the same error. The only way I got it to go away was to upgrade Yarn to v4

Still occurring for us on the latest canary release.

Tested https://github.com/vercel/next.js/issues/58576#issuecomment-1842780167 a bit more and whilst it works (as in no build errors and the app starts), it breaks SSR, so everything is client side rendered.

Any updates? I deleted the lock file and reinstalled the modules, but I’m still facing an issue. I’m using pnpm.

(edit) I’m experiencing the same issue on Next 14.0.1 and later versions. The problem doesn’t occur when building locally, but it surfaces when deploying to Vercel.

(edit) In my case, the cause of the error was that error handling was not in place when the data was not correctly loaded during dynamic page rendering.

I am facing the same issue when I try to run build command locally. Have spent a couple of hours going through making sure I follow the guidelines in the error message, nothing has worked so far. Also tried adding output: "standalone" to next.config.js as per suggestion above and this also didn’t work. Will continue looking into it, but the error message is not very clear or helpful.

EDIT: I managed to fix this by deleting node_modules and lockfile, and running the install command and then the build command!

I also faced this issue, resolved by following this guide: https://github.com/vercel/next.js/tree/canary/examples/with-docker

Hi, what are the specifics around how you resolved the issue? I can’t see much in that example repo other than the basic Next.js setup.

It’s the In existing projects section, I copied the Dockerfile and set output config to standalone

Ah ok thanks. We have that set in our config, so unfortunately doesn’t fix the issue for us.

We have the same issue. Occurs on next versions 14.0.2, 14.0.3 and 14.0.4

This appears to be related somewhat to using transform-rename-import in our Babel config:

    [
      "transform-rename-import",
      { "original": "@loadable/component", "replacement": "next/dynamic" }
    ]

We have a monorepo setup, whereby we are sharing components between the 2 apps. The main app is running on Express and uses @loadable for dynamic imports of modules. We added transform-rename-import to swap out the @loadable/component import with next/dynamic, which worked up until 14.0.2.

Removing the transform-rename-import from our Babel config lets the Next.js app build successfully on 14.0.2 onwards, however it results in the dynamic imports being rendered clientside, rather than rendering with SSR.

No use of this transform-rename-import on my project, but still using babel too (due to no good SWC alternative of the formatJs plugins 😕)