Error occurred prerendering page "/docs-og/image.png" when trying to run pnpm run build

[pippinmole]

Repro

https://github.com/pippinmole/fumadocs-docs-og

Steps to reproduce

1. git clone [email protected]:pippinmole/fumadocs-docs-og.git
2. cd fumadocs-docs-og
3. pnpm install
4. pnpm run build
5. Get error

Error

PS C:\Users\icond\Downloads\repro> pnpm run build

> [email protected] build C:\Users\icond\Downloads\repro
> next build

   ▲ Next.js 15.1.6
   - Experiments (use with caution):
     · turbo

   Creating an optimized production build ...
[MDX] initialized map file
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase     
Error occurred prerendering page "/docs-og/image.png". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Invalid URL
    at new URL (node:internal/url:806:29)
    at fileURLToPath (node:internal/url:1485:12)
    at file:///C:/Users/icond/Downloads/repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/@vercel/og/index.node.js:18929:32
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async Object.start (C:\Users\icond\Downloads\repro\.next\server\app\docs-og\[...slug]\route.js:1:3789)
Export encountered an error on /docs-og/[...slug]/route: /docs-og/image.png, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.

What should happen

The nextjs project successfully builds

Additional info

What's weird is that it builds successfully on Vercel

Node.js v20.18.2

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 64629
  Available CPU cores: 16
Binaries:
  Node: 20.18.2
  npm: 10.9.1
  Yarn: N/A
  pnpm: 9.15.4
Relevant Packages:
  next: 15.1.6 // Latest available version is detected (15.1.6).
  eslint-config-next: 15.1.6
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

[fuma-nama]

Hmm cannot not reproduce the error, the error is from @vercel/og which is like a upstream problem as we don't use fileURLToPath for OG wrapper.

Even if it doesn't work, you can also configure OG image manually like in normal Next.js apps: https://nextjs.org/docs/app/api-reference/functions/image-response

[pippinmole]

Hmm cannot not reproduce the error, the error is from @vercel/og which is like a upstream problem as we don't use fileURLToPath for OG wrapper.

I might not be understanding. If you don't use fileURLToPath, then how come it shows up in the stack trace?

Also, I've just run the same repro commands on my MacBook Air M1, and it work's perfectly. This could be windows-specific as I've also just tested on a Windows server I have on my home-server, with fresh install of Git, pnpm, node, and it's showing the same error:

[fuma-nama]

See the line

at file:///C:/Users/icond/Downloads/repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/@vercel/og/index.node.js:18929:32

It's somewhere in the bundled package, not sure if we can even fix it from user land. Maybe you can replace the generateOGImage with your own function that returns ImageResponse, or try passing different options like customising the font

[pippinmole]

Does it help to know that the file printed in the stacktrace is trying to load a font?

[fuma-nama]

In this case you can try to specify a font, or open an issue on the @vercel/og package (probably the Next.js repo)