Drizzle Team•16mo ago

Setting up Drizzle with Supabase in Next.js App Router

Hey Drizzle Team, absolutely love what you are building, but i run into a few problems setting it up. I am using Next.js App router and Supabase. This is my current setup: drizzle.config.ts

import type { Config } from "drizzle-kit";
import * as dotenv from "dotenv";
dotenv.config();

export default {
  schema: "./src/db/schema.ts",
  driver: "pg",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL as string,
  },
} satisfies Config;

import type { Config } from "drizzle-kit";
import * as dotenv from "dotenv";
dotenv.config();

export default {
  schema: "./src/db/schema.ts",
  driver: "pg",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL as string,
  },
} satisfies Config;

/src/app/db/index.ts

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const connectionString = process.env.DATABASE_URL;
const client = postgres(connectionString as string);

export const db = drizzle(client, {
  schema,
});

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const connectionString = process.env.DATABASE_URL;
const client = postgres(connectionString as string);

export const db = drizzle(client, {
  schema,
});

/src/app/db/schema.ts

import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";

export const waitlist = pgTable("waitlist", {
  id: serial("id").primaryKey(),
  email: text("email").unique(),
});

import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";

export const waitlist = pgTable("waitlist", {
  id: serial("id").primaryKey(),
  email: text("email").unique(),
});

--- Now i want to create a new entry in my db on the click of a button and tried this:

"use client";
import React from "react";
import { db } from "@/db/index";
import { waitlist } from "@/db/schema";
import { Button } from "@/components/ui/button";

const Test = () => {
  function insertTest() {
    db.insert(waitlist)
      .values({ email: "[email protected]" })
      .then(() => console.log("inserted"));
  }

  return <Button onClick={insertTest}>Get Started</Button>;
};

export default Test;

"use client";
import React from "react";
import { db } from "@/db/index";
import { waitlist } from "@/db/schema";
import { Button } from "@/components/ui/button";

const Test = () => {
  function insertTest() {
    db.insert(waitlist)
      .values({ email: "[email protected]" })
      .then(() => console.log("inserted"));
  }

  return <Button onClick={insertTest}>Get Started</Button>;
};

export default Test;

But i am always running into this error:

./node_modules/postgres/src/index.js:2:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/db/index.ts
./src/components/Test.tsx

./node_modules/postgres/src/index.js:2:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/db/index.ts
./src/components/Test.tsx

Any help would be appreciated a lot!! Thank you so much

6 Replies

Budi•11mo ago

Looks like an import issue

THE MASTER•11mo ago

@Nils man did u find the error? i am stuck here as well

sliderx212x•10mo ago

You can't use Postgres on the client. You will have to implement a server route to do this and call it from the client or better still use Server Actions.

Stefano•9mo ago

@sliderx212x is right. But i have a similar issue, i'm using server actions to make a call to the db from a client component, and i got the same error can't resolve fs, like if i'm call it from the client. I used server action before and i'm pretty sure i'm using it in the right way, i have a form i na client component, which call a server action via action={serverAction}, and the server action is in a separate file marked as "use server".. anyone can help me please?

hafffe•9mo ago

It's possible your problem is related to edge runtime, where fs is not supported. server actions inherit the runtime from the page or layout they are called from, so make sure you do have do not have export const runtime = 'edge' in your page or layout

Stefano•9mo ago

Ehy thanks @hafffe but I’ve checked and there is no edge runtime.. I tryied to update next to the latest, now everything works, but in the console I still see a fetch, with a 200 response..is this the aspected behavior? To me this sound like a fetch from the client..

Gaming

Programming

Setting up Drizzle with Supabase in Next.js App Router