ERROR: Deploy to Cloudflare Pages after installing Prisma | Nuxt 3

[dalisys]

Bug description

I am trying to deploy a Nuxt 3 application to cloudflare, but after installing the prisma Module, the app stopped working

After running locally
npx nuxt build --preset cloudflare-pages ; npx wrangler pages dev dist/

I get this Error

C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\wrangler-dist\cli.js:29765
            throw a;
            ^

TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute
    at getPathFromURLWin32 (node:internal/url:1364:11)
    at fileURLToPath (node:internal/url:1394:22)
    at tryFileURLToPath (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:133:12)
    at retrieveSourceMapURL (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:335:27)
    at Array.<anonymous> (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:353:26)
    at C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:199:32
    at mapSourcePosition (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:383:21)
    at wrapCallSite (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:592:20)
    at prepareStackTrace (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\node_modules\@cspotcode\source-map-support\source-map-support.js:671:41)
    at getSourceMappedString (C:\Users\username\AppData\Roaming\npm\node_modules\wrangler\wrangler-dist\cli.js:161846:34) {
  code: 'ERR_INVALID_FILE_URL_PATH'
}

In Cloudflare after deploying it I get this error:

and in the logs:

"logs": [
    {
      "message": [
        "[nuxt] [request error] [unhandled] [500]",
        "Cannot read properties of undefined (reading 'exec')\n  at chunks/build/server.mjs:1:76942"
      ],
      "level": "error",
      "timestamp": 1723727695746
    },
    {
      "message": [
        "[nuxt] [request error] [unhandled] [500]",
        "Cannot access 'default' before initialization\n  at chunks/routes/renderer.mjs:1:100942  \n  at async chunks/routes/renderer.mjs:1:100895  \n  at async chunks/routes/renderer.mjs:1:103350  \n  at async Object.handler (chunks/routes/renderer.mjs:1:102102)  \n  at async Object.handler (chunks/runtime.mjs:1:73771)  \n  at async chunks/runtime.mjs:1:76908  \n  at async chunks/runtime.mjs:1:108399  \n  at async errorHandler (chunks/runtime.mjs:1:104342)  \n  at async chunks/runtime.mjs:1:77060  \n  at async chunks/runtime.mjs:1:108399"
      ],
      "level": "error",
      "timestamp": 1723727695746
    }
  ],

I tried with a local DB, one in Supabase and one in aiven (aws).

How to reproduce

Here is a reproduction repo: https://github.com/dalisys/prisma-flare.git

1. npm install
2. add .env file
3. npx nuxt build --preset cloudflare-pages
4. npx wrangler pages dev dist/

Expected behavior

Working

Prisma information

Schema

generator client {
  provider = "prisma-client-js"
}

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

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

[mtzrmzia]

Same issue.. have you found a solution?

[dalisys]

@mtzrmzia yes, I found two solutions:

1. Switch to Drizzle (which I choose)😅

I had to set the compatibility flag:

and in nuxt.config.ts

  nitro: {
    rollupConfig: {
      external: ["cloudflare:sockets"],
    },
  },

2. Use Prisma Accelerate (which has a free plan)

Here I used the prisma package and not the prisma nuxt module (I didn't try with the module)

{
  "dependencies": {
    "@prisma/client": "5.18.0",
    "@prisma/extension-accelerate": "^1.1.0",
    "nuxt": "^3.12.4",
  },
  "devDependencies": {
    "@prisma/client": "5.18.0",
    "prisma": "5.18.0"
  },
}

your schmea:

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL_ACCELERATE")
  directUrl = env("DIRECT_URL")
}

and your api for example

import { PrismaClient } from "@prisma/client/edge";
import { withAccelerate } from "@prisma/extension-accelerate";

const prisma = new PrismaClient().$extends(withAccelerate());

export default defineEventHandler(async (event) => {
  const users = await prisma.user.findMany({
    select: {
      id: true,
      name: true,
    },
    cacheStrategy: { ttl: 60 },
  });

  return users;
});

3. Cloudflare Hyperdrive

I think there is also a solution with it, by setting up a cloudflare worker which communicate with the DB and your app with the hyperdrive (exactly like prisma accelerate) - I tried but didn't succeed

[mahdi4187]

rm -rf node_module package-lock.json
npm install
npm run build