Build Fails: `Module parse failed` on binary files when using `@cloudflare/pages-plugin-vercel-og/api` with `@cloudflare/next-on-pages`

[jhangmez]

Example URL(s)

This issue relates to the interaction between two Cloudflare packages/documentations:

• next-on-pages adapter: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/
• vercel-og plugin: https://developers.cloudflare.com/pages/functions/plugins/vercel-og/

Actual Behavior

When deploying a Next.js 14 (App Router) project using the @cloudflare/next-on-pages build adapter, the build process fails if an API Route Handler uses ImageResponse from @cloudflare/pages-plugin-vercel-og/api.

The build fails with a Module parse failed: Unexpected character error. This happens because the build process attempts to parse binary dependencies of the OG plugin, such as fonts (.ttf.bin) and WebAssembly modules (.wasm), as if they were JavaScript.

The specific error from the build log is:

▲ Failed to compile.
▲
▲ ./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin
▲ Module parse failed: Unexpected character ' '

Adding custom Webpack rules to next.config.js to handle .ttf.bin or .wasm files does not solve the issue, suggesting that the @cloudflare/next-on-pages build process might be ignoring or overriding this part of the Next.js configuration.

Expected Behavior

The build process orchestrated by @cloudflare/next-on-pages should complete successfully.

Ideally, the build adapter should be pre-configured to correctly handle the internal file dependencies (like binary fonts and WASM files) of other official Cloudflare packages, such as @cloudflare/pages-plugin-vercel-og. A user should not need to perform complex Webpack configuration for two official Cloudflare tools to work together.

Additional information

How to Reproduce:

1. Create a new Next.js 14 project with the App Router.
2. Install @cloudflare/next-on-pages and @cloudflare/pages-plugin-vercel-og.
3. Create an Edge API Route Handler (e.g., app/api/og/route.ts).
4. Inside the route, import and use ImageResponse from @cloudflare/pages-plugin-vercel-og/api to generate a simple image.
5. Set up the project for Cloudflare Pages deployment using npx @cloudflare/next-on-pages@1 as the build command.
6. Push to GitHub and let Cloudflare Pages run the build. The build will fail.

Environment:

• Next.js: v14.2.x
• Node.js: v22.x (as seen in build logs)
• @cloudflare/next-on-pages: v1.13.12
• @cloudflare/pages-plugin-vercel-og: Latest version

[kodster28]

Howdy @jhangmez, apologies for the 301 here, but your best bet for getting a fix would be dropping an issue on the engineering repo for one of those (like next-on-pages).

Also, from that repo, the official guidance is to also use opennextjs/cloudflare, though that does mean you'd be using Workers instead of Pages.