fix: resolve OG image font loading ENOENT on Vercel#138
Open
julianbenegas wants to merge 2 commits intomainfrom
Open
fix: resolve OG image font loading ENOENT on Vercel#138julianbenegas wants to merge 2 commits intomainfrom
julianbenegas wants to merge 2 commits intomainfrom
Conversation
The OG image routes were using readFile with process.cwd() to load GeistMono fonts from node_modules, which fails on Vercel deployments because the fonts aren't included in the serverless function bundle (file tracing doesn't pick them up from node_modules/geist). Fix: - Bundle the GeistMono-Regular.ttf and GeistMono-Bold.ttf font files directly in the app at apps/web/app/api/og/_fonts/ - Create a shared loadFonts() utility using fetch(new URL(..., import.meta.url)) which ensures Next.js correctly bundles the fonts with the serverless functions - Update all 4 OG routes (post, home, repo, user) to use the shared utility - Also fix home route's icon.svg loading to use fetch instead of fs.readFile
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Replace fetch(new URL(..., import.meta.url)) with readFile + process.cwd() since Turbopack doesn't support fetch for file:// URLs during build - Defer font loading to first call (lazy singleton) instead of module evaluation time to avoid errors during page data collection - Add dynamic = 'force-dynamic' to /api/og/home to prevent prerendering - Revert home route icon loading back to readFile from disk
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| import { join } from "path" | ||
| import { loadFonts } from "../_fonts/load-fonts" | ||
|
|
||
| export const dynamic = "force-dynamic" |
Contributor
There was a problem hiding this comment.
OG image route has three critical issues: process.cwd() fails in monorepo contexts, export const dynamic = "force-dynamic" conflicts with cacheComponents config causing build errors, and font loading also uses process.cwd()
Comment on lines
+2
to
+11
| import { join } from "path" | ||
|
|
||
| let fontsPromise: ReturnType<typeof loadFontsFromDisk> | null = null | ||
|
|
||
| async function loadFontsFromDisk() { | ||
| const fontsDir = join(process.cwd(), "app/api/og/_fonts") | ||
|
|
||
| const [fontRegular, fontBold] = await Promise.all([ | ||
| readFile(join(fontsDir, "GeistMono-Regular.ttf")), | ||
| readFile(join(fontsDir, "GeistMono-Bold.ttf")), |
Contributor
There was a problem hiding this comment.
Suggested change
| import { join } from "path" | |
| let fontsPromise: ReturnType<typeof loadFontsFromDisk> | null = null | |
| async function loadFontsFromDisk() { | |
| const fontsDir = join(process.cwd(), "app/api/og/_fonts") | |
| const [fontRegular, fontBold] = await Promise.all([ | |
| readFile(join(fontsDir, "GeistMono-Regular.ttf")), | |
| readFile(join(fontsDir, "GeistMono-Bold.ttf")), | |
| import { fileURLToPath } from "url" | |
| import { dirname, join } from "path" | |
| let fontsPromise: ReturnType<typeof loadFontsFromDisk> | null = null | |
| const __filename = fileURLToPath(import.meta.url) | |
| const __dirname = dirname(__filename) | |
| async function loadFontsFromDisk() { | |
| const [fontRegular, fontBold] = await Promise.all([ | |
| readFile(join(__dirname, "GeistMono-Regular.ttf")), | |
| readFile(join(__dirname, "GeistMono-Bold.ttf")), |
process.cwd() fails in monorepo/serverless context when font loading tries to resolve relative paths from wrong directory
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The OG image routes were using readFile with process.cwd() to load
GeistMono fonts from node_modules, which fails on Vercel deployments
because the fonts aren't included in the serverless function bundle
(file tracing doesn't pick them up from node_modules/geist).
Fix:
directly in the app at apps/web/app/api/og/_fonts/
which ensures Next.js correctly bundles the fonts with the serverless functions