T
TanStack2mo ago
equal-aqua

Client and Server code mixing and I don't know how

After migrating from prisma to drizzle I was forced to import "server-only" in my db file:
import "server-only";
import { drizzle } from "drizzle-orm/neon-http";
import * as schema from "./schema";
import * as relations from "./relations";

export const db = drizzle(process.env.DATABASE_URL!, {
schema: { ...schema, ...relations },
});
import "server-only";
import { drizzle } from "drizzle-orm/neon-http";
import * as schema from "./schema";
import * as relations from "./relations";

export const db = drizzle(process.env.DATABASE_URL!, {
schema: { ...schema, ...relations },
});
Because i was seeing errors like:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query')
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query')
This error was appearing even in pages with no db calls. This makes me conclude that some weird thing is happening and calling the db but I cannot figure out what... I even isolated every file that calls the db so that files that contain a serverFn that calls the db ONLY contain server code but this still did not fix the issue. Anyone has any ideas on how to fix this?
5 Replies
deep-jade
deep-jade2mo ago
did you solve the problem? i also can't make it right, everytime build happen there is always error says about module in drizzle db file to the frontend, when the actual situation is i never import db to the frontend.
generous-apricot
generous-apricot2mo ago
can you share a complete example?
deep-jade
deep-jade2mo ago
yes, but i want to try to solve the problem first 1 question, can we use "server-only" on tanstack start? like for example using that in drizzle db instance file.
generous-apricot
generous-apricot2mo ago
no that won't work we plan on adding a similar symbolic import into start though you can however already now wrap functions into serverOnly from start to prevent them ending up in the client build
deep-jade
deep-jade2mo ago
okay the problem is solved, i migrate entirely from server function to oRPC, i don't know where's the problem honestly, maybe in some utils or in some files there is a mix between frontend utils/handlers and backend utils/handlers. it's a bit frustating tanstack start doesn't have an ability like next that can detect exact line or exact file the problem occured. i know start still in beta, i really understand that, i believe tanstack team already have plan to fix the error tracking or some kinda like this, thanks for hardwork!

Did you find this page helpful?