Incompatibility with NextJS app dir, CloudFlare Pages and D1

[steebchen]

Bug description

There are issues when deploying NextJS (app dir) with CloudFlare pages and D1.

• warnings pop up in react server components
• server actions do not work at all with this combination

How to reproduce

Reproduction at https://github.com/steebchen/next-cf-prisma-d1

• fork https://github.com/steebchen/next-cf-prisma-d1 or git clone git@github.com:steebchen/next-cf-prisma-d1.git
• pnpm install
• adapt your own cloudflare details in wrangler.toml
• create a pages project from git if forked or deploy using CLI if cloned
• run pnpm dev
• visit localhost:3000 and create a simple poll
  • warnings will popup
  • when creating the poll using the server action, it breaks

When running pnpm build, it results in this:

Creating an optimized production build ...
Failed to compile.

edge-chunks/274.js from Terser
  x await isn't allowed in non-async function
     ,-[167:1]
 167 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 168 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 169 | /* harmony export */ });
 170 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((await Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 92[39](https://github.com/steebchen/next-cf-prisma-d1/actions/runs/8805198567/job/24167263548#step:8:40), 23))).default);
     :                                                                         ^^^^^^^
 171 | 
 172 | /***/ }),
     `----

Caused by:
    0: failed to parse input file
    1: Syntax Error
Error: 
  x await isn't allowed in non-async function
     ,-[167:1]
 167 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 168 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 169 | /* harmony export */ });
 170 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((await Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 9239, 23))).default);
     :                                                                         ^^^^^^^
 171 | 
 172 | /***/ }),
     `----

Caused by:
    0: failed to parse input file
    1: Syntax Error

Executing a server action results in the following error:

Unhandled Runtime Error
Error: Unexpected identifier 'Promise'

Call Stack
(action-browser)/./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm-edge-light-loader.js
/Users/steebchen/projects/polls/.next/server/app/page.js (4816:1)
Next.js
async Object.getQueryEngineWasmModule
node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm.js (170:1)
async eval
node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/@prisma/client/runtime/wasm.js (11:700)
async Object.loadLibrary
node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/@prisma/client/runtime/wasm.js (11:979)
async ft.loadEngine
node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/@prisma/client/runtime/wasm.js (11:3234)
async ft.instantiateLibrary
node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/@prisma/client/runtime/wasm.js (11:2821)

The following warning appears using RSCs in dev mode appears (but it still works!):

 ⚠ ./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm-edge-light-loader.js
The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module:
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm-edge-light-loader.js
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm.js
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/default.js
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/@prisma/client/default.js
./lib/cf.ts
./actions/vote.ts

./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm-edge-light-loader.js
The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.

Import trace for requested module:
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm-edge-light-loader.js
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/wasm.js
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/.prisma/client/default.js
./node_modules/.pnpm/@prisma+client@5.13.0_prisma@5.13.0/node_modules/@prisma/client/default.js
./lib/cf.ts
./lib/poll.ts
./app/poll/[id]/page.tsx
./node_modules/.pnpm/next@14.2.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpoll%2F%5Bid%5D%2Fpage&page=%2Fpoll%2F%5Bid%5D%2Fpage&appPaths=%2Fpoll%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Fpoll%2F%5Bid%5D%2Fpage.tsx&appDir=%2FUsers%2Fsteebchen%2Fprojects%2Fpolls%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fsteebchen%2Fprojects%2Fpolls&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/poll/[id]/page.tsx?__next_edge_ssr_entry__
 GET /poll/bUGELVurjEYj8M2lbIjH0 200 in 1494ms

Expected behavior

It should work. :D

• no warning in RSCs
• it should not break in server actions

Prisma information

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Poll {
  id        String   @id @default(uuid())
  createdAt DateTime @default(now()) @map("created_at")
  views     Int      @default(1)
  title     String
  rows      Row[]

  @@map("poll")
}

model Row {
  id     String @id @default(uuid())
  title  String
  votes  Int    @default(0)
  poll   Poll   @relation(fields: [pollId], references: [id])
  pollId String @map("poll_id")

  @@map("row")
}

Environment & setup

• OS: macos, cf workers
• Database: SQLite / D1
• Node.js version: v20.10.0

Prisma Version

> pnpm prisma --version                           
Environment variables loaded from .env
prisma                  : 5.12.1
@prisma/client          : 5.12.1
Computed binaryTarget   : darwin-arm64
Operating System        : darwin
Architecture            : arm64
Node.js                 : v20.10.0
Query Engine (Node-API) : libquery-engine 473ed3124229e22d881cb7addf559799debae1ab (at node_modules/.pnpm/@prisma+engines@5.12.1/node_modules/@prisma/engines/libquery_engine-darwin-arm64.dylib.node)
Schema Engine           : schema-engine-cli 473ed3124229e22d881cb7addf559799debae1ab (at node_modules/.pnpm/@prisma+engines@5.12.1/node_modules/@prisma/engines/schema-engine-darwin-arm64)
Schema Wasm             : @prisma/prisma-schema-wasm 5.12.0-21.473ed3124229e22d881cb7addf559799debae1ab
Default Engines Hash    : 473ed3124229e22d881cb7addf559799debae1ab
Studio                  : 0.499.0
Preview Features        : driverAdapters

[steebchen]

might be a duplicate of #23600

[leedavidcs]

might be a duplicate of #23600

The root cause is hopefully the same (i.e. it all gets fixed if/when #23754 is merged). But I think tracking this for D1 specifically isn't so bad since the error and stack trace emit different things between the neondb and d1 adapters.