blitz-js / blitz-js/legacy-framework
Unhandled Runtime Error TypeError: prisma.$on is not a function
- Dominant language
- JavaScript
- Stars
- 3
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 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:
Contributor guide
Research direction
Reproduce the failure from the client setup shown in db/index.ts, using enhancePrisma with the supplied query logging configuration. Start by tracing the enhanced client at the point where prisma.$on is called and compare its runtime behavior with prisma.$use. Done means the query event registration works without a browser TypeError while using blitz dev.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- backend, databases
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100