Vercel Deployment Failing Despite Successful Local Build – Need Help Identifying the Issue

Help
1

I am facing deployment issues on Vercel, even though the same project works perfectly in my local environment.

  1. Local Environment:

• Running pnpm dev, pnpm build, and vercel dev works without any issues.

• The application builds and runs successfully locally.

  1. Vercel Deployment:

• The same project fails during the build process on Vercel.

• I’ve tested this by reverting to a previously working commit (one that was successfully deployed before), but the issue still occurs.

• I have confirmed that all required environment variables are correctly set up in both local and Vercel environments.

• The error appears to occur during the pre-rendering of a specific page (/support/terms-of-use).

  1. Error Details:

• The error log shows:

(node:638) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.

14:54:11.926

(Use node --trace-deprecation ... to show where the warning was created)

14:54:11.969

(node:631) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.

14:54:11.970

(Use node --trace-deprecation ... to show where the warning was created)

14:54:11.982

(node:645) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.

14:54:11.982

(Use node --trace-deprecation ... to show where the warning was created)

14:54:15.684

Generating static pages (0/78) …

14:54:16.462

ReferenceError: document is not defined

14:54:16.462

at createTag (/vercel/path0/.next/server/chunks/8679.js:20:11481)

14:54:16.462

at /vercel/path0/.next/server/chunks/8679.js:20:24369

14:54:16.462

at /vercel/path0/.next/server/chunks/8679.js:20:24492

14:54:16.462

at /vercel/path0/.next/server/chunks/8679.js:20:27317

14:54:16.462

at /vercel/path0/.next/server/chunks/8679.js:20:11146

14:54:16.462

at 62970 (/vercel/path0/.next/server/chunks/8679.js:20:11150)

14:54:16.462

at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)

14:54:16.462

at 13184 (/vercel/path0/.next/server/chunks/8679.js:20:2120)

14:54:16.462

at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)

14:54:16.462

at 34322 (/vercel/path0/.next/server/chunks/6604.js:1:4040) {

14:54:16.462

digest: ‘1732007412’

Error occurred prerendering page “/support/terms-of-use”. Read more: Prerender Error with Next.js | Next.js
ReferenceError: document is not defined
at createTag (/vercel/path0/.next/server/chunks/5368.js:11:11326)
…
Generating static pages (58/78)

• The error suggests that the document object is being referenced during the server-side rendering phase, which is not allowed.

  1. Additional Steps Taken:

• I removed all third-party libraries and related code to rule out external dependencies as a cause, but the same issue persists.

• Verified that all environment variables are correct and match those used in the local environment.

• Reverted to an older commit that was previously successfully deployed to Vercel, but the error still occurs.

• Cleared the Vercel build cache and redeployed.

Reference:

Key Question:

Why is the deployment failing on Vercel despite working flawlessly in my local environment with the same configuration and codebase? Any insights or guidance would be greatly appreciated!

2

I believe there is no issue with the code itself because the same version currently live in production was restored and rebuilt. However, the errors mentioned above only occur during these new build attempts.

3

Hi, @datehubin! Welcome to the Vercel Community :gift:

Thanks for sharing so much details on your error - helps us a lot! Let me try and help here.

The error “ReferenceError: document is not defined” typically occurs when you’re trying to access the document object during server-side rendering or static generation. This is because the document object is only available in the browser environment, not on the server.

To fix this, you need to ensure that any code accessing document or other browser-specific APIs is only executed on the client-side. You can do this by:

  • Using dynamic imports with next/dynamic for components that use document.
  • Wrapping the code that uses document in a useEffect hook or checking if typeof window !== 'undefined' before executing it.

When it comes to having differing local and Vercel environments, I recommend checking out this community post with some ideas on how to debug.

Remember, when deploying to Vercel, it’s crucial to ensure that your code is compatible with both client-side and server-side environments, especially when using Next.js with its server-side rendering capabilities.

Let us know how you get on!

4

I’m having a similar issue with ReferenceError: window is not defined. It’s quite counterintuitive that you can put "use client" in your files and then still have to solve these kinds of errors.

I will create a separate topic for my issue, just weighing in here to let @datehubin know they aren’t alone.

I also could not reproduce locally at first, but after deleting and reinstalling node_modules the error reproduced locally which at least makes debugging easier.

1 Like
5

Appreciate you weighing in on this, Richard :pray:

Feel free to open the new topic!

1 Like
6

I am facing the same issue , this issue needs to be fixed by vercel team. my codebase neither have document or window used still I am getting the same error you are getting.

In my case its working fine locally with next build and also vercel build.

Vercel team please fix this :pray:

CC : @pawlean

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.