cloudflare / cloudflare/pages-plugins

`next build` fails on Cloudflare Pages due to unhandled `.wasm` and `.bin` files

Open
#72 0 comments 2 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.