Next.js Discord

Discord Forum

Next/Font no require() on ESM Graph with top-level await

Unanswered
Jack @ DJL posted this in #help-forum
Open in Discord
Im getting an Build only Error while using Geist Font and or next/font
Im running a t3-app with mostly just sentry, posthog flags-sdk and clerk added

Important Part of Error message:
An error occurred in next/font. // also in geist/font/ sans/mono

Error: require() cannot be used on an ESM graph with top-level await. Use import() instead. To see where the top-level await comes from, use --experimental-print-required-tla.

Repo: https://github.com/JackatDJL/djl-homepage
package.json: https://github.com/JackatDJL/djl-homepage/blob/main/package.json

Error message while trying with next/font/google (inter) // Same counts for Geist (same error message but other paths):
https://pastebin.com/EVuqZktZ

Working on a min-reproducible Example on a Branch rn

2 Replies

Created Minimal Reproduction
https://github.com/JackatDJL/djl-homepage/tree/04-11-next_font_no_require_on_esm_graph_with_top-level_await

git clone https://github.com/JackatDJL/djl-homepage.git
cd djl-homepage
pnpm i
pnpm build
https://gist.github.com/JackatDJL/a4df3f05362b8fcd04c375bd2d6a4d1d

I think im closer to the issue, it maybe has something todo with the new Tailwind Implementation