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

mltwist-brice commented 2 years ago

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?

Use the enchancePrisma client to wrap the prisma client
Pass in {log: [{emit: "stdout", level: "query" }]} to the enhanced prisma client as an argument
Attempt to log the query event by calling the enhance prisma client instance enhancePrismaClient.$on("query", (e) => {...})
Start local dev server with blitz dev
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