Drizzle Team•10mo ago

Error: Can't resolve 'net' when importing schemas created with drizzle-zod to client components

I have created and exported a zod schema from the drizzle orm schema file with the createInsertSchema function from the drizzle-zod package. But I get the following error when importing the zod schema in a client file and passing it to react-hook-form. Most probably this error is because I am importing something in a client component from a server component and it has nothing to do with drizzle. I'm using next js 14 btw. Here is the code for drizzle schema:

// src/server/db/schema/auth.ts
import { timestamp, text, primaryKey, integer } from "drizzle-orm/pg-core";
import type { AdapterAccount } from "@auth/core/adapters";
import { createInsertSchema } from "drizzle-zod";
import { createTable } from "@/server/db";
import { z } from "zod";

export const users = createTable("user", {
  id: text("id").notNull().primaryKey(),
  name: text("name"),
  email: text("email").notNull(),
  emailVerified: timestamp("emailVerified", { mode: "date" }),
  password: text("password"),
  image: text("image"),
});
export const InsertUserSchema = createInsertSchema(users, {
  name: z.coerce.string().min(1, { message: "Name required" })
  email: z.coerce.string().email(),
  password: z.coerce.string().min(1, { message: "Password required" }),
});
export const LoginSchema = InsertUserSchema.pick({
  email: true,
  password: true,
});

// src/server/db/schema/auth.ts
import { timestamp, text, primaryKey, integer } from "drizzle-orm/pg-core";
import type { AdapterAccount } from "@auth/core/adapters";
import { createInsertSchema } from "drizzle-zod";
import { createTable } from "@/server/db";
import { z } from "zod";

export const users = createTable("user", {
  id: text("id").notNull().primaryKey(),
  name: text("name"),
  email: text("email").notNull(),
  emailVerified: timestamp("emailVerified", { mode: "date" }),
  password: text("password"),
  image: text("image"),
});
export const InsertUserSchema = createInsertSchema(users, {
  name: z.coerce.string().min(1, { message: "Name required" })
  email: z.coerce.string().email(),
  password: z.coerce.string().min(1, { message: "Password required" }),
});
export const LoginSchema = InsertUserSchema.pick({
  email: true,
  password: true,
});

Here is the frontend code.

// src/component/login-form.tsx
"use client";
import { LoginSchema } from "@/server/db/schema/auth";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { type z } from "zod";

export function LoginForm() {
  const form = useForm<z.infer<typeof LoginSchema>>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });
  function onSubmit(values: z.infer<typeof LoginSchema>) {
    console.log(values);
  }
  return // the form goes here
}

// src/component/login-form.tsx
"use client";
import { LoginSchema } from "@/server/db/schema/auth";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { type z } from "zod";

export function LoginForm() {
  const form = useForm<z.infer<typeof LoginSchema>>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });
  function onSubmit(values: z.infer<typeof LoginSchema>) {
    console.log(values);
  }
  return // the form goes here
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Error: Can't resolve 'net' when importing schemas created with drizzle-zod to client components