Incompatibility with NextJS app dir, CloudFlare Pages and D1 #23929
Description
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