Module not found build errors

When trying to publish/deploy on vercel and/or build locally after downloading I keep getting the following error. Any thoughts on how to proceed? It seems like a dependencies issue, possibly related to accompanying font folders needed, but which don’t appear to be included in the build.

For my local build, I get:

Build Error

Failed to compile

Next.js (14.2.30) is outdated (learn more)

app/layout.tsx

Module not found: Can’t resolve ‘./fonts/GeistMonoVF.woff2’ Module Not Found | Next.js Import trace for requested module:

./app/layout.tsx

From the vercel log, I get:

12:28:59
Running “bun run build”
12:28:59
$ next build
12:29:00
▲ Next.js 14.2.16
12:29:00
12:29:00
Creating an optimized production build …
12:29:07
Failed to compile.
12:29:07
12:29:07
app/layout.tsx
12:29:07
Module not found: Can’t resolve ‘./fonts/GeistMonoVF.woff2’
12:29:07
12:29:07

12:29:07
12:29:07
Import trace for requested module:
12:29:07
./app/layout.tsx
12:29:07
12:29:07
app/layout.tsx
12:29:07
Module not found: Can’t resolve ‘./fonts/GeistVF.woff2’
12:29:07
12:29:07

12:29:07
12:29:07
Import trace for requested module:
12:29:07
./app/layout.tsx
12:29:07
12:29:07
12:29:07

Build failed because of webpack errors
12:29:07
error: script “build” exited with code 1
12:29:07
Error: Command “bun run build” exited with 1
12:29:07

This is a common issue when font files are missing from the project. The error indicates that your app/layout.tsx file is trying to import local font files (GeistMonoVF.woff2 and GeistVF.woff2) that don’t exist in your project’s fonts directory.

Here’s how to fix this issue:

...

Alternative solutions:

  1. If you want to keep Geist fonts, you can install them via npm:
npm install geist

Then update your layout.tsx:

import { GeistSans, GeistMono } from 'geist/font'
  1. If you have the font files, create a fonts directory in your app folder and add the missing .woff2 files there.
  2. Use system fonts as a fallback by updating your tailwind.config.ts:
fontFamily: {
  sans: ['system-ui', 'sans-serif'],
  mono: ['ui-monospace', 'monospace'],
}

The solution uses Google Fonts’ Inter, which is reliable and doesn’t require local files. This should resolve your build errors both locally an