Cloudflare
Troubleshooting

Troubleshooting

Trying to deploy to Cloudflare Pages, instead of Cloudflare Workers?

@opennextjs/cloudflare is specifically built for deploying Next.js apps to Cloudflare Workers (opens in a new tab)

Cloudflare Workers now support the majority of functionality from Cloudflare Pages, and have features that are not yet supported by Cloudflare Pages. Refer to the Compatibility Matrix (opens in a new tab) in the Cloudflare Workers docs.

If you need to deploy to Cloudflare Pages, you can use @cloudflare/next-on-pages, and follow the Cloudflare Pages guides for deploying Next.js apps (opens in a new tab).

"Your Worker exceeded the size limit of 3 MiB"

The Cloudflare Account you are deploying to is on the Workers Free plan, which limits the size of each Worker to 3 MiB (opens in a new tab). When you subscribe to the Workers Paid plan, each Worker can be up to 10 MiB.

When deploying your Worker, wrangler will show both the original and compressed sizes. Only the latter (gzipped size) matters for these limits.

My app fails to build when I import a specific NPM package

First, make sure that the nodejs_compat compatibility flag is enabled, and your compatibility date is set to on or after "2024-09-23", in your wrangler configuration file (opens in a new tab). Refer to the Node.js Workers docs (opens in a new tab) for more details on Node.js support in Cloudflare Workers.

Some NPM packages define multiple exports. For example:

"exports": {
    "other": "./src/other.js",
    "node": "./src/node.js",
    "browser": "./src/browser.js",
    "default": "./src/default.js"
},

When you use @opennextjs/cloudflare, Wrangler (opens in a new tab) bundles your code before running it locally, or deploying it to Cloudflare. Wrangler has to choose which export to use, when you import a module. By default, Wrangler, which uses esbuild (opens in a new tab), handles this in a way that is not compatible with some NPM packages.

You may want to modify how Wrangler resolves multiple exports, such that when you import packages, the node export, if present, is used. You can do do by defining the following variables in a .env file within the root directory of your Next.js app:

WRANGLER_BUILD_CONDITIONS=""
WRANGLER_BUILD_PLATFORM="node"

Error: Cannot perform I/O on behalf of a different request.

Some DB clients (i.e. postgres (opens in a new tab)) create a connection to the DB server when they are first instantiated and re-use it for later requests. This programming model is not compatible with the Workers runtime where a connection can not be re-used in a different request.

The following error is generated in such a case:

⨯ Error: Cannot perform I/O on behalf of a different request. I/O objects (such as streams, request/response bodies, and others) created in the context of one request handler cannot be accessed from a different request's handler. This is a limitation of Cloudflare Workers which allows us to improve overall performance. (I/O type: Writable)

To solve this, you should create the DB client inside a request context and not keep a global DB client.

A global client would not work:

// src/lib/db.ts
import postgres from "postgres";
 
// `client` is global.
// As the connection would be shared across requests, it fails on worker
export const client = postgres(process.env.DATABASE_URL, { max: 5 });
 
// src/app/api/route.ts
import { client } from "@/db/db";
 
export const dynamic = "force-dynamic";
 
export async function GET() {
  return new Response(JSON.stringify(await client`SELECT * FROM users;`));
}

It can fixed by creating the client for each incoming request:

// src/app/api/route.ts
export const dynamic = "force-dynamic";
 
export async function GET() {
  // The client is created for each incoming request and no connection is shared across requests
  const client = postgres(process.env.DATABASE_URL, { max: 5 });
  return new Response(JSON.stringify(await client`SELECT * FROM users;`));
}

Error: Failed to load chunk server/chunks/ssr/<chunk_name>.js

If you see an error similar to:

✘ [ERROR] ⨯ Error: Failed to load chunk server/chunks/ssr/<chunk_name>.js

      at loadChunkPath
  (...)
      at Object.loadChunk
  (...)
      at .open-next/server-functions/default/.next/server/app/page.js

You are proably using a turbopack enabled build (next build --turbo) which is not currently supported by OpenNext. Change your build command to next build to fix the issue.