Next.js app build fails when using Prisma with DB driver in Server Action #23600
Description
Bug description
When building a Next.js application using Prisma on the edge runtime with the Database driver, the build fails with the following error. This problem seems to occur when using Prisma client on the server action imported by the client component. Also, this problem did not occur with Prisma v5.10.2 (in Early Access), and occurred with v5.11.0.
Failed to compile.
app/page.js from Terser
x await isn't allowed in non-async function
,-[26410:1]
26410 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
26411 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
26412 | /* harmony export */ });
26413 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((await Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 9737, 23))).default);
: ^^^^^^^
26414 |
26415 | /***/ }),
`----
Caused by:
0: failed to parse input file
1: Syntax Error
Error:
x await isn't allowed in non-async function
,-[26410:1]
26410 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
26411 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
26412 | /* harmony export */ });
26413 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((await Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 9737, 23))).default);
: ^^^^^^^
26414 |
26415 | /***/ }),
`----
Caused by:
0: failed to parse input file
1: Syntax Error
> Build failed because of webpack errors
How to reproduce
git clone https://github.com/nzws/prisma-with-nextjs-edge-import-problem-reprocd prisma-with-nextjs-edge-import-problem-reproyarn installyarn build- See error
Expected behavior
The build passes normally and the application can run.
Prisma information
I created a repository that can reproduce this issue: https://github.com/nzws/prisma-with-nextjs-edge-import-problem-repro (nzws/prisma-with-nextjs-edge-import-problem-repro@cc513a7)
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
}// ./app/lib/prisma.ts
import { Pool } from "@neondatabase/serverless";
import { PrismaNeon } from "@prisma/adapter-neon";
import { PrismaClient } from "@prisma/client";
export function createPrismaClient() {
const neon = new Pool({ connectionString: process.env.DATABASE_URL });
const adapter = new PrismaNeon(neon);
const prisma = new PrismaClient({ adapter: adapter });
return prisma;
}// ./app/actions.ts
"use server";
import { createPrismaClient } from "./lib/prisma";
export async function onCreate() {
const prisma = createPrismaClient();
await prisma.user.create({
data: {
email: "john@example.com",
name: "John Doe",
},
});
}// ./app/client-component.tsx: imported by page.tsx
"use client";
import { onCreate } from "./actions";
export function ClientComponent() {
const handleCreate = () => {
void (async () => {
await onCreate();
})();
};
return (
<div>
<h1>Hello, World!</h1>
<button onClick={handleCreate}>Create User</button>
</div>
);
}Environment & setup
- OS: macOS
- Database: PostgreSQL
- Node.js version: v20.10.0
Prisma Version
prisma : 5.11.0
@prisma/client : 5.11.0
Computed binaryTarget : darwin-arm64
Operating System : darwin
Architecture : arm64
Node.js : v20.10.0
Query Engine (Node-API) : libquery-engine efd2449663b3d73d637ea1fd226bafbcf45b3102 (at node_modules/@prisma/engines/libquery_engine-darwin-arm64.dylib.node)
Schema Engine : schema-engine-cli efd2449663b3d73d637ea1fd226bafbcf45b3102 (at node_modules/@prisma/engines/schema-engine-darwin-arm64)
Schema Wasm : @prisma/prisma-schema-wasm 5.11.0-15.efd2449663b3d73d637ea1fd226bafbcf45b3102
Default Engines Hash : efd2449663b3d73d637ea1fd226bafbcf45b3102
Studio : 0.499.0
Preview Features : driverAdapters