search

prisma / prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB
https://www.prisma.io
Apache License 2.0
39.36k stars 1.54k forks source link

Incompatibility with NextJS app dir, CloudFlare Pages and D1 #23929

Closed steebchen closed 4 months ago

steebchen commented 6 months ago

Bug description

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

How to reproduce

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

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

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

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 commented 5 months ago

might be a duplicate of #23600

leedavidcs commented 5 months ago

might be a duplicate of #23600

The root cause is hopefully the same (i.e. it all gets fixed if/when https://github.com/prisma/prisma/pull/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.

jkomyno commented 5 months ago

I hoped that the unofficial 5.14.0-integration-static-wasm-worker-loader.5 Prisma version would fix it, but apparently that now gives me a new error

Uncaught ReferenceError: wasm_ba8a497110c853880f9c31c3460be3c21e86d7f4 is not defined

This issue is still under investigation.

leedavidcs commented 5 months ago

I hoped that the unofficial 5.14.0-integration-static-wasm-worker-loader.5 Prisma version would fix it, but apparently that now gives me a new error

Uncaught ReferenceError: wasm_ba8a497110c853880f9c31c3460be3c21e86d7f4 is not defined

This issue is still under investigation.

Thanks @jkomyno . I'm looking forward to a resolution for this issue. This is currently blocking me from trying the d1 adapter out for the @cloudflare/next-on-pages project I am trying to build.

jkomyno commented 5 months ago

Hey @leedavidcs, perhaps you may try to share your own project as well here, if it's open source? The more context we have on this issue, the better. Thanks!

leedavidcs commented 5 months ago

@jkomyno Sorry, the project is closed source 😕. However, it is currently breaking the documented usage of auth.js v5 while using the Prisma adapter on @cloudflare/next-on-pages. Specifically next.js server actions for signing in.

leedavidcs commented 5 months ago

I'll try to grab some time to create a minimal reproduction using Auth.js v5 and @cloudflare/next-on-pages sometime on or before this weekend.

leedavidcs commented 5 months ago

@jkomyno Sorry for the wait. I've created the repo with a minimal reproduction of the issue I'm facing with Auth.js v5, @prisma/adapter-d1 and @cloudflare/next-on-pages here: https://github.com/leedavidcs/next-turbo-d1-prisma-error

nwpr commented 5 months ago

@leedavidcs I didn't try your code, but one thing I stumbled across came to my mind:

You're using the datasource as described on the documentation on the web:

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

Even though the documentation states the env can be ignored, I had exceptions with it. In the GitHub docs the documentation is actually different, and since changing the configuration it's working for me:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

I'm also using next@latest and next-auth@beta. Maybe you're encountering the same issue :)

leedavidcs commented 5 months ago

@nwpr Thanks for the tip. I've updated the url property on the datasource and the outcome is unfortunately the same. The repo has been updated to contain the change.

EDIT: Here is the stack trace from when I've last tested the issue (it crashes after the error is thrown):

@project-apps/web:dev: ./src/db/prisma.ts
@project-apps/web:dev: ./src/db/index.ts
@project-apps/web:dev: ./src/server/auth.ts
@project-apps/web:dev: ./src/app/layout.tsx
@project-apps/web:dev: ../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2Fhome%2Fleedavidcs%2Fprojects%2Fnext-turbo-d1-prisma-error%2Fapps%2Fweb%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fleedavidcs%2Fprojects%2Fnext-turbo-d1-prisma-error%2Fapps%2Fweb&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./src/app/page.tsx?__next_edge_ssr_entry__
@project-apps/web:dev:  ⚠ ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm-edge-light-loader.js
@project-apps/web:dev: The generated code contains 'async/await' because this module is using "topLevelAwait".
@project-apps/web:dev: However, your target environment does not appear to support 'async/await'.
@project-apps/web:dev: As a result, the code may not run as expected or may cause runtime errors.
@project-apps/web:dev: 
@project-apps/web:dev: Import trace for requested module:
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm-edge-light-loader.js
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm.js
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/default.js
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/@prisma/client/default.js
@project-apps/web:dev: ./src/db/prisma.ts
@project-apps/web:dev: ./src/db/index.ts
@project-apps/web:dev: ./src/server/auth.ts
@project-apps/web:dev: ./src/client/components/LoginButton/signIn.ts
@project-apps/web:dev: 
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm-edge-light-loader.js
@project-apps/web:dev: The generated code contains 'async/await' because this module is using "topLevelAwait".
@project-apps/web:dev: However, your target environment does not appear to support 'async/await'.
@project-apps/web:dev: As a result, the code may not run as expected or may cause runtime errors.
@project-apps/web:dev: 
@project-apps/web:dev: Import trace for requested module:
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm-edge-light-loader.js
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm.js
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/default.js
@project-apps/web:dev: ../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/@prisma/client/default.js
@project-apps/web:dev: ./src/db/prisma.ts
@project-apps/web:dev: ./src/db/index.ts
@project-apps/web:dev: ./src/server/auth.ts
@project-apps/web:dev: ./src/app/layout.tsx
@project-apps/web:dev: ../../node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2Fhome%2Fleedavidcs%2Fprojects%2Fnext-turbo-d1-prisma-error%2Fapps%2Fweb%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fleedavidcs%2Fprojects%2Fnext-turbo-d1-prisma-error%2Fapps%2Fweb&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./src/app/page.tsx?__next_edge_ssr_entry__
@project-apps/web:dev:  GET /api/auth/session 200 in 511ms
@project-apps/web:dev: /home/leedavidcs/projects/next-turbo-d1-prisma-error/node_modules/.pnpm/wrangler@3.57.0_@cloudflare+workers-types@4.20240512.0/node_modules/wrangler/wrangler-dist/cli.js:29749
@project-apps/web:dev:             throw a;
@project-apps/web:dev:             ^
@project-apps/web:dev: 
@project-apps/web:dev: SyntaxError: Unexpected identifier 'Promise'
@project-apps/web:dev:     at (action-browser)/../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm-edge-light-loader.js (/home/leedavidcs/projects/next-turbo-d1-prisma-error/apps/web/.next/server/app/page.js:4606:1)
@project-apps/web:dev:     at __webpack_require__ (/home/leedavidcs/projects/next-turbo-d1-prisma-error/apps/web/.next/server/edge-runtime-webpack.js:37:33)
@project-apps/web:dev:     at Function.fn (/home/leedavidcs/projects/next-turbo-d1-prisma-error/apps/web/.next/server/edge-runtime-webpack.js:392:21)
@project-apps/web:dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
@project-apps/web:dev:     at async Object.getQueryEngineWasmModule (webpack-internal:///(action-browser)/../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/.prisma/client/wasm.js:203:13)
@project-apps/web:dev:     at async eval (webpack-internal:///(action-browser)/../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/@prisma/client/runtime/wasm.js:11:723)
@project-apps/web:dev:     at async Object.loadLibrary (webpack-internal:///(action-browser)/../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/@prisma/client/runtime/wasm.js:11:985)
@project-apps/web:dev:     at async ft.loadEngine (webpack-internal:///(action-browser)/../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/@prisma/client/runtime/wasm.js:11:3277)
@project-apps/web:dev:     at async ft.instantiateLibrary (webpack-internal:///(action-browser)/../../node_modules/.pnpm/@prisma+client@5.14.0_prisma@5.14.0/node_modules/@prisma/client/runtime/wasm.js:11:2875)
@project-apps/web:dev: 
@project-apps/web:dev: Node.js v20.10.0
@project-apps/web:dev:
jkomyno commented 4 months ago

I hoped that the unofficial 5.14.0-integration-static-wasm-worker-loader.5 Prisma version would fix it, but apparently that now gives me a new error

Uncaught ReferenceError: wasm_ba8a497110c853880f9c31c3460be3c21e86d7f4 is not defined

This issue is still under investigation.

Hey, I'm back at this issue again! @leedavidcs, thanks for your reproduction.

@steebchen, @nwpr, @leedavidcs and others, may you please try this new unofficial version of Prisma? 5.15.0-integration-client-dynamic-wasm-imports.1

You can quickly install it via:

pnpm add -D prisma@5.15.0-integration-client-dynamic-wasm-imports.1;
pnpm update "@prisma/*" 5.15.0-integration-client-dynamic-wasm-imports.1

(please double check that prisma generate has run before retrying). Thanks!

leedavidcs commented 4 months ago

I hoped that the unofficial 5.14.0-integration-static-wasm-worker-loader.5 Prisma version would fix it, but apparently that now gives me a new error

Uncaught ReferenceError: wasm_ba8a497110c853880f9c31c3460be3c21e86d7f4 is not defined

This issue is still under investigation.

Hey, I'm back at this issue again! @leedavidcs, thanks for your reproduction.

@steebchen, @nwpr, @leedavidcs and others, may you please try this new unofficial version of Prisma? 5.15.0-integration-client-dynamic-wasm-imports.1

You can quickly install it via:

pnpm add -D prisma@5.15.0-integration-client-dynamic-wasm-imports.1;
pnpm update "@prisma/*" 5.15.0-integration-client-dynamic-wasm-imports.1

(please double check that prisma generate has run before retrying). Thanks!

Thanks @jkomyno ! I'll try the new version either today or tomorrow and let you know.

jkomyno commented 4 months ago

Hi @leedavidcs, that'd be great, thank you!

leedavidcs commented 4 months ago

Sorry @jkomyno . I haven't been able to validate this because I'm running into an unrelated issue connecting to my local d1 database in the repro repo I've created. I can't invest too much time into verifying this right now as I am traveling. If someone else can verify in my place that would be nice. Else, I will need to get back to you when I've returned from my travels in about 2 weeks.

Thank you for your work on this, and apologies for the inconveniences :pray: