cloudflare / cloudflare/pages-plugins
`next build` fails on Cloudflare Pages due to unhandled `.wasm` and `.bin` files
- Dominant language
- TypeScript
- Stars
- 62
- Forks
- 21
- PR merge metrics
- No merged PRs in 30d
Description
**Environment:**
* **Framework:** Next.js (v15.3.3)
* **Deployment:** Cloudflare Pages
* **Adapter:** OpenNext (`@opennextjs/cloudflare`)
* **Plugin:** `@cloudflare/pages-plugin-vercel-og`
**Problem Description:**
When deploying a Next.js application using OpenNext to Cloudflare Pages, the `next build` command fails if the project uses an API route with `ImageResponse` from `@cloudflare/pages-plugin-vercel-og`.
The build process throws a `Module parse failed: Unexpected character` error. This happens because the Next.js Webpack configuration doesn't know how to handle the binary file types included with the plugin.
First, it fails on the font file:
`./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/noto-sans-v27-latin-regular.ttf.bin`
After adding a Webpack rule for `.bin` files, it then fails on the WebAssembly module:
`./node_modules/@cloudflare/pages-plugin-vercel-og/dist/src/api/resvg.wasm`
**Steps to Reproduce:**
1. Initialize a Next.js project using `create-cloudflare` to set it up with OpenNext for Cloudflare Pages.
2. Install the Vercel OG plugin: `npm install @cloudflare/pages-plugin-vercel-og`.
3. Create an API route (e.g., `/app/api/og/route.ts`) that imports and uses `ImageResponse` from the plugin.
4. Push the code to a repository connected to Cloudflare Pages to trigger a deployment.
5. Observe the build logs, which will show the "Module parse failed" error.
**Suggested Solution / Workaround:**
The build can be fixed by modifying `next.config.ts` to correctly handle both `.bin` and `.wasm` files. This involves enabling the `asyncWebAssembly` experiment and adding a Webpack rule to treat these files as assets.
```typescript
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
webpack: (config) => {
config.experiments = { ...config.experiments, asyncWebAssembly: true };
config.module.rules.push({
test: /\.(bin|wasm)$/,
type: 'asset/resource',
});
return config;
},
};
export default nextConfig;
```
It would be helpful if this configuration requirement was mentioned in the plugin's documentation to facilitate setup. Thank you
Contributor guide
Assessment
This issue has not been assessed yet.