Das Posts - Answer Overflow

Das

•Created by Das on 11/5/2024 in #help

Using inferred schema types in Next.js client components, 'server-only' breaks Drizzle Studio.

Im working with Next.js 14 app router. I'd like to use Drizzle's inferred types across my application, including client components. Schema:

import "server-only";
import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const usersTable = sqliteTable("users", {
  id: integer("id").primaryKey(),
  email: text("email").unique().notNull(),
});

export type InsertUser = typeof usersTable.$inferInsert;
export type SelectUser = typeof usersTable.$inferSelect;

import "server-only";
import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const usersTable = sqliteTable("users", {
  id: integer("id").primaryKey(),
  email: text("email").unique().notNull(),
});

export type InsertUser = typeof usersTable.$inferInsert;
export type SelectUser = typeof usersTable.$inferSelect;

Client component:

"use client";
import { useState } from "react";
import { SelectUser } from "@/app/db/schema";

export default function UserMenu({ user }: { user: SelectUser }) {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setMenuOpen((prev) => !prev)}>Account</button>
      <div className={menuOpen ? "open" : "close"}>
        <p>{user.email}</p>
      </div>
    </div>
  );
}

"use client";
import { useState } from "react";
import { SelectUser } from "@/app/db/schema";

export default function UserMenu({ user }: { user: SelectUser }) {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setMenuOpen((prev) => !prev)}>Account</button>
      <div className={menuOpen ? "open" : "close"}>
        <p>{user.email}</p>
      </div>
    </div>
  );
}

This is able to run as well as be built without error, but running npx drizzle-kit studio it throws the error: "Error: This module cannot be imported from a Client Component module. It should only be used from a Server Component.". Removing import "server-only"; from the Schema file fixes it. So I am wondering, a) Is it safe to import types from the schema file on the client? b) Is the error thrown from import "server-only"; in the Schema file a problem with my codebase or internal to Drizzle Studio since thats the only place it throws an error?

1 replies

Gaming

Programming