Issue loading font with Jimp package in API function call

[Bubaflip]

Summary

Hello Vercel and Next.js community,

We're encountering a persistent issue with loading a custom font for the Jimp package when deployed on Vercel. The function works correctly in our local environment but fails upon deployment. The problem appears to be tied to how static files are handled on Vercel, an area where our experience is limited.

Details of the Issue:

Local Environment: The font loads successfully and the Jimp package functions as expected.
Vercel Deployment: The font fails to load. The function is being triggered via an API.
We did find a similar issue previously reported (see [Issue #33736 on next.js]), but the solutions provided there haven't resolved our problem.

Code Snippet: I am reverting back to the version of the method that successfully loads the font locally.

We've attempted multiple approaches to address this issue, all of which have been unsuccessful when deployed on Vercel. We would greatly appreciate any insights or suggestions, especially from those familiar with Vercel's deployment nuances and static file management.

Thank you in advance for your help!

Additional information

Here is the cardCreator.js API function where the issue is:

import Jimp from 'jimp';
import path from 'path';

const CreateCard = async (text) => {
    const publicDirectory = path.resolve('public/cardExports');
    const imagePath = path.resolve('public/cardBG.png');
    const hash = createRandomHash();
    const imageName = `output${hash}.png`;
    const outputImagePath = path.join(publicDirectory, imageName);

    // add returns
    let formattedText = '';
    let count = 0;
    const words = text.split(' ');
    for (let i = 0; i < words.length; i++) {
        if (count + words[i].length > 63) {
            formattedText += '\n';
            count = 0;
        }
        formattedText += words[i] + ' ';
        count += words[i].length + 1;
    }
    const finalText = formattedText.trim();

    try {
        const image = await Jimp.read(imagePath);
        const customFont = await Jimp.loadFont('/fonts/cardFont.fnt');
        const textWidth = Jimp.measureText(customFont, finalText);
        const textHeight = Jimp.measureTextHeight(customFont, finalText, textWidth);

        const x = (image.bitmap.width / 2) - (textWidth / 2);
        const y = (image.bitmap.height / 2) - (textHeight / 2);

        image.print(customFont, x, y, {
            text: finalText,
            alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
            alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
        }, textWidth, textHeight);

        const buffer = await image.getBufferAsync(Jimp.MIME_PNG);

        await image.writeAsync(outputImagePath);


        return imageName;

    } catch (error) {
        console.error('Failed to create image:', error);
        return null;
    }
}

function createRandomHash() {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let hash = '';
    for (let i = 0; i < 6; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        hash += characters[randomIndex];
    }
    return hash;
}


export default CreateCard;

Example

No response

[Bubaflip]

Here is the error from the Vercel logs:
Failed to create image: [Error: ENOENT: no such file or directory, open 'public/fonts/cardFont.fnt'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: 'public/fonts/cardFont.fnt'
}

[Bubaflip]

I would like to add that the font is located in my root public folder: public/fonts

[latentsauce]

@Bubaflip have you tried modifying your next.config file like this? i had the same issue and i fixed it by doing:

/** @type {import('next').NextConfig} */

const nextConfig = {
  experimental: {
    outputFileTracingIncludes: {
      "/api/<your-api-route>": ["./assets/**"] // i put my font files in a folder called assets in root
    }
  }
}

export default nextConfig

and in my api route:

import path from "path"
const fontPath = path.resolve("./assets/impact.fnt")
const font = await Jimp.loadFont(fontPath)

[zkMyst]

you're a legend.❤️

[Bubaflip]

Thank you @latentsauce 🙏 This worked!

[Justbeingjustin]

Wow, this worked!! So many hours I've spent on this.