How to use drizzle-zod types in the frontend
node-postgres
drizzle orm
drizzle ormI like drizzle-zod but I cant figure out how I can use it on my frontend.
On my frontend I want to do something like this:
and my backend would define the schema like this:
but when I try to bundle the frontend website I get the error that:
The only solution I saw is to manually create raw zod schemas which I dont want, is it maybe still possible somehow? Help is appreciated.
On my frontend I want to do something like this:
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { UserLoginRequestSchema } from "@repo/database"
type LoginFormData = z.infer<typeof UserLoginRequestSchema>
export function LoginPage() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm<LoginFormData>({
resolver: zodResolver(UserLoginRequestSchema)
})import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { UserLoginRequestSchema } from "@repo/database"
type LoginFormData = z.infer<typeof UserLoginRequestSchema>
export function LoginPage() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm<LoginFormData>({
resolver: zodResolver(UserLoginRequestSchema)
})and my backend would define the schema like this:
import { createInsertSchema, createSelectSchema } from "drizzle-zod"
import { users } from "../schema"
export const UsersInsertSchema = createInsertSchema(users)
export type UsersInsert = z.infer<typeof UsersInsertSchema>
export const UserSignupRequestSchema = UsersInsertSchema.pick({ email: true, username_slug: true }).extend({
email: z.email(),
password: z.string().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z0-9]).{8,128}$/, "Password must be 8-128 characters and include uppercase, lowercase, number, and special character"),
username_slug: UsersInsertSchema.shape.username_slug.refine((val) => /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(val), { message: "username_slug must be a lowercase slug (letters, numbers, hyphens)" })
})
export const UserLoginRequestSchema = UserSignupRequestSchema.pick({ email: true, password: true })
export type UserLoginRequest = z.infer<typeof UserLoginRequestSchema>import { createInsertSchema, createSelectSchema } from "drizzle-zod"
import { users } from "../schema"
export const UsersInsertSchema = createInsertSchema(users)
export type UsersInsert = z.infer<typeof UsersInsertSchema>
export const UserSignupRequestSchema = UsersInsertSchema.pick({ email: true, username_slug: true }).extend({
email: z.email(),
password: z.string().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z0-9]).{8,128}$/, "Password must be 8-128 characters and include uppercase, lowercase, number, and special character"),
username_slug: UsersInsertSchema.shape.username_slug.refine((val) => /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(val), { message: "username_slug must be a lowercase slug (letters, numbers, hyphens)" })
})
export const UserLoginRequestSchema = UserSignupRequestSchema.pick({ email: true, password: true })
export type UserLoginRequest = z.infer<typeof UserLoginRequestSchema>but when I try to bundle the frontend website I get the error that:
$ bun run build
1 | import pg from "pg";
^
error: Could not resolve: "pg". Maybe you need to "bun install"?
at /home/dev/project/node_modules/.bun/drizzle-orm@0.44.7+48c49fff56ae09c3/node_modules/drizzle-orm/node-postgres/session.js:1:16$ bun run build
1 | import pg from "pg";
^
error: Could not resolve: "pg". Maybe you need to "bun install"?
at /home/dev/project/node_modules/.bun/drizzle-orm@0.44.7+48c49fff56ae09c3/node_modules/drizzle-orm/node-postgres/session.js:1:16The only solution I saw is to manually create raw zod schemas which I dont want, is it maybe still possible somehow? Help is appreciated.
The official Discord for all Drizzle related projects, such as Drizzle ORM, Drizzle Kit, Drizzle Studio and more!
11,879Members
Resources
Was this page helpful?
