next.js figlet Error: ENOENT: no such file or directory, open 'pathToProject\.next\server\fonts\Standard.flf'

[mahpooya]

Summary

I created a new next.js app using npx create-next-app@latest (next.js 15 at the current time)

Then I removed the node_module folder and run

pnpm install

It was successful and with

pnpm run dev

I saw the default home page of create-next-app

Then I install figlet using pnpm and use it in my home page file.

import figlet from "figlet";

export default function Home() {
    const homeFigletText = figlet.textSync(`Home!`);

At this point I get this error in home page:

Error: ENOENT: no such file or directory, open 'pathToProject\.next\server\fonts\Standard.flf'

src\app\page.tsx (6:25) @ Home

  4 |
  5 | export default function Home() {
> 6 |   const homeFigletText = figlet.textSync(`Home!`);

During searches, I found out that Next.js will automatically trace each page and its dependencies to determine all of the files that are needed for deploying. It statically analyze import, require, and fs usage to determine all files that a page might load https://nextjs.org/docs/pages/api-reference/config/next-config-js/output

But it somehow failed to trace figlet fonts

And figlet Getting Started - Webpack / React recommend to import fonts using importable-fonts (and this workaround actually works and mandatory for client components)

// @ts-ignore
import standard from "figlet/importable-fonts/Standard";
figlet.parseFont("Standard", standard);

But I used to use figlet without importable-fonts Is there any way to tell next.js that copy figlet fonts to .next/server folder?

Additional information

No response

Example

No response

[mahpooya]

One workaround I made is by adding a custom plugin to webpack, that copy those files

First I add cpr for having cross-platform cp -r cli command

pnpm add --dev cpr

Then add copyFigletFonts to your package.json scripts

	"scripts": {
		"copyFigletFonts": "cpr ./node_modules/figlet/fonts/ ./.next/server/fonts/ -o",
	},

Then in your next.config.ts add this:

import { Compiler } from 'webpack';
const exec = require('child_process').exec;
import * as fs from "node:fs";

const nextConfig: NextConfig = {
	...
	webpack: (
		config,
		{buildId, dev, isServer, defaultLoaders, nextRuntime, webpack}
	) => {
		// console.log(config);
		config.plugins.push(
			{
				apply: (compiler: Compiler) => {
					compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
						if (!fs.existsSync("./.next/server/fonts/")) {
							console.log('Copy figlet fonts to .next/server/fonts...');
							exec('npm run copyFigletFonts', (error: string, stdout: string, stderr: string) => {
								// if (stdout) process.stdout.write(stdout);
								if (stderr) process.stderr.write(stderr);
							});
						}
					});
				}
			}
		)

		// Important: return the modified config
		return config
	},

	...
};