Font files not found in opengraph-image
Answered
Tofugrass posted this in #help-forum

Which is strange, because they are found during the build step, and the project builds without issue. It works locally when running next dev and the open graph tab in vercel shows no issues.
The file apps/app/assets/Montserrat-Regular.ttf certainly exists at build time. But in prod at runtime, it error500's with the above issue.
⨯ Error: ENOENT: no such file or directory, open '/var/task/apps/app/assets/Montserrat-Regular.ttf'
at async f (.next/server/app/opengraph-image/route.js:1:1750) {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/var/task/apps/app/assets/Montserrat-Regular.ttf'
}
The file apps/app/assets/Montserrat-Regular.ttf certainly exists at build time. But in prod at runtime, it error500's with the above issue.
export default async function Image({
params: { league_id },
}: {
params: { league_id: string };
}) {
// Font loading, process.cwd() is Next.js project directory
console.log(process.cwd());
const MontserratRegular = await readFile(
join(process.cwd(), "assets/Montserrat-Regular.ttf"),
);
Answered by Tofugrass
A simple solution was to just move the fonts into the public folder and fetch them.
const MontserratRegular = await fetch(
config.WEB_URL + "/assets/Montserrat-Regular.ttf",
).then((res) => res.arrayBuffer());
1 Reply

A simple solution was to just move the fonts into the public folder and fetch them.
const MontserratRegular = await fetch(
config.WEB_URL + "/assets/Montserrat-Regular.ttf",
).then((res) => res.arrayBuffer());
Answer