Unhandled Runtime Error TypeError: prisma.$on is not a function

[mltwist-brice]

What is the problem?

While using the enhancePrisma Prisma client from Blitz, prisma.$on throws a runtime type error in the browser saying TypeError: prisma.$on is not a function. However, Prisma middleware such as prisma.$use(...) appears to work and be recognized by typescript. In VS Code it shows me the intellisense and doesn't highlight it as a type error, but during runtime using blitz dev it throws an error in the browser.

Paste all your error logs here:

index.js?20a9:342 Uncaught TypeError: prisma.$on is not a function
    at eval (VM7167 index.ts:21:8)
    at Module../db/index.ts (_app.js?ts=1652198032659:203:1)
    at Module.options.factory (webpack.js?ts=1652198032659:685:31)
    at __webpack_require__ (webpack.js?ts=1652198032659:37:33)
    at fn (webpack.js?ts=1652198032659:354:21)
    at eval (VM7166 utils.ts:12:60)
    at Module../app/core/utils.ts (_app.js?ts=1652198032659:181:1)
    at Module.options.factory (webpack.js?ts=1652198032659:685:31)
    at __webpack_require__ (webpack.js?ts=1652198032659:37:33)
    at fn (webpack.js?ts=1652198032659:354:21)
    at eval (LabeledTextField.tsx:10:64)
    at Module../app/core/components/LabeledTextField.tsx (_app.js?ts=1652198032659:159:1)
    at Module.options.factory (webpack.js?ts=1652198032659:685:31)
    at __webpack_require__ (webpack.js?ts=1652198032659:37:33)
    at fn (webpack.js?ts=1652198032659:354:21)
    at eval (LoginForm.tsx:16:94)
    at Module../app/auth/components/LoginForm.tsx (_app.js?ts=1652198032659:50:1)
    at Module.options.factory (webpack.js?ts=1652198032659:685:31)
    at __webpack_require__ (webpack.js?ts=1652198032659:37:33)
    at fn (webpack.js?ts=1652198032659:354:21)
    at eval (_app.tsx:12:87)
    at Module../app/pages/_app.tsx (_app.js?ts=1652198032659:192:1)
    at Module.options.factory (webpack.js?ts=1652198032659:685:31)
    at __webpack_require__ (webpack.js?ts=1652198032659:37:33)
    at fn (webpack.js?ts=1652198032659:354:21)
    at eval (?2eb8:5:16)
    at eval (route-loader.js?361d:207:49)

Paste all relevant code snippets here:

import { enhancePrisma } from "blitz"
import { PrismaClient } from "@prisma/client"

const EnhancedPrisma = enhancePrisma(PrismaClient)

export * from "@prisma/client"
const prisma = new EnhancedPrisma({
  log: [
    {
      emit: "stdout",
      level: "query",
    },
  ],
})

prisma.$on("query", (e) => {
  console.log("Query: " + e.query)
  console.log("Params: " + e.params)
  console.log("Duration: " + e.duration + "ms")
})

export default prisma

What are detailed steps to reproduce this?

1. Use the enchancePrisma client to wrap the prisma client
2. Pass in {log: [{emit: "stdout", level: "query" }]} to the enhanced prisma client as an argument
3. Attempt to log the query event by calling the enhance prisma client instance enhancePrismaClient.$on("query", (e) => {...})
4. Start local dev server with blitz dev
5. See type error message appear in browser

Run blitz -v and paste the output here:

macOS | darwin-x64 | Node: v14.17.0

blitz: 0.45.4 (global)
blitz: 0.45.4 (local)

  Package manager: yarn 
  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Apple M1
    Memory: 21.50 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.asdf/installs/nodejs/14.17.0/bin/node
    Yarn: 1.22.17 - ~/.asdf/installs/nodejs/14.17.0/.npm/bin/yarn
    npm: 8.6.0 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.12.0 => 3.12.0 
    blitz: 0.45.4 => 0.45.4 
    prisma: 3.12.0 => 3.12.0 
    react: 18.0.0 => 18.0.0 
    react-dom: 18.0.0 => 18.0.0 
    typescript: ~4.5 => 4.5.5 

Please include below any other applicable logs and screenshots that show your problem:

[beerose]

I'm sorry for the late reply. Did you manage to resolve this issue?

If not, does it only happen in the browser or also on the server?

[iliasbhal]

I had this issue today. $on doesn't exist on clients with extensions.
Might be worth filling an issue with prisma.

[swizzmagik]

+1

[nkcoder]

+1

[berezhinskiyo]

Hi, I'd faced with the same problem

[prabhsharan36]

+1

[tnishikata]

+1

[JClackett]

Getting this too, when deploying nextjs to vercel. I am using the old middleware, and cant really change that yet,

TypeError: h.$use is not a function

prisma: 6.15.0

6.13.0 seems to be working?