Error on Vercel Deployment

[lecramr]

Hey,

first thanks for the library! When I try to deploy my project to Vercel I get following error:

Error: ENOENT: no such file or directory, open '/vercel/path0/-frontend/.svelte-kit/output/server/entries/endpoints/og/noto-sans-v27-latin-regular.ttf'
--
13:58:18.393 | at Object.openSync (node:fs:596:3)
13:58:18.393 | at Object.readFileSync (node:fs:464:35)
13:58:18.394 | at file:///vercel/path0/-frontend/.svelte-kit/output/server/entries/endpoints/og/_server.ts.js:20744:19
13:58:18.394 | at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
13:58:18.394 | at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
13:58:18.394 | at async analyse (file:///vercel/path0/-frontend/node_modules/.pnpm/@sveltejs+kit@2.5.0_@sveltejs+vite-plugin-svelte@3.0.2_svelte@4.2.10_vite@5.0.12/node_modules/@sveltejs/kit/src/core/postbuild/analyse.js:84:62)
13:58:18.394 | at async MessagePort.<anonymous> (file:///vercel/path0/-frontend/node_modules/.pnpm/@sveltejs+kit@2.5.0_@sveltejs+vite-plugin-svelte@3.0.2_svelte@4.2.10_vite@5.0.12/node_modules/@sveltejs/kit/src/utils/fork.js:22:16)
13:58:18.394 | Emitted 'error' event on Worker instance at:
13:58:18.394 | at [kOnErrorMessage] (node:internal/worker:314:10)
13:58:18.394 | at [kOnMessage] (node:internal/worker:325:37)
13:58:18.394 | at MessagePort.<anonymous> (node:internal/worker:225:57)
13:58:18.394 | at [nodejs.internal.kHybridDispatch] (node:internal/event_target:786:20)
13:58:18.394 | at exports.emitMessage (node:internal/per_context/messageport:23:28) {
13:58:18.394 | errno: -2,
13:58:18.394 | syscall: 'open',
13:58:18.394 | code: 'ENOENT',
13:58:18.394 | path: '/vercel/path0/-frontend/.svelte-kit/output/server/entries/endpoints/og/noto-sans-v27-latin-regular.ttf'
13:58:18.394 | }

Generation Code I am using is:

// src/routes/og/+server.ts
import { ImageResponse } from 'svelte-og-image';
import type { RequestHandler } from './$types';
import ProfileCard from './profile-card.svelte';

export const GET: RequestHandler = async ({ url }) => {
    return await new ImageResponse(
        ProfileCard,
        {
            name: 'test'
        },
        {
            height: 630,
            width: 1200
        }
    );
};

Any Ideas what I am doing wrong?

[eltigerchino]

Hey there, sorry for not putting up a warning about this issue. You’re not doing anything wrong and I’m planning to propose a fix for this soon (in the Vercel SvelteKit adapter). Here’s why it happens:

The default font is currently not being bundled together in the edge function where @vercel/og is being used. This occurs because the esbuild settings for adapter-vercel does not specify to copy over font files. As a result, your deployment fails when it analyses your bundled code and can’t find the font file.

The demo website from this repository works around this by running pnpm patch @sveltejs/adapter-vercel and editing the esbuild settings to copy over the .ttf font file and to not rename imported assets with a hash.

https://github.com/eltigerchino/svelte-og-image/blob/53704ce19bb7883761545fc18993dbce81a0412f/patches/%40sveltejs__adapter-vercel%405.3.0.patch#L12

Now that esbuild is configured to copy over the font file that @vercel/og requires with the precise name it was given, this package uses a little hack by referencing the asset in an import so that esbuild knows it should copy over the font file. https://github.com/eltigerchino/svelte-og-image/blob/53704ce19bb7883761545fc18993dbce81a0412f/src/lib/index.ts#L7 Without this, the font file will not get copied over because esbuild doesn’t know about it since the@vercel/og package only references the asset in a URL constructor (which esbuild does not recognise yet) instead of an import. https://github.com/evanw/esbuild/issues/795

In the end this really needs to be fixed in @sveltejs/adapter-vercel (and optionally @vercel/og too but it is not open-sourced). However, I’m currently away from my laptop until next Tuesday.

[eltigerchino]

Just need to wait for https://github.com/sveltejs/kit/pull/11674 to be merged so that it can be used on the edge by specifying at least one font such as https://github.com/eltigerchino/svelte-og-image/blob/main/src/routes/og/%2Bserver.ts