nils_77339 Posts - Answer Overflow

nils_77339

•Created by nils_77339 on 8/16/2023 in #help

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

7 replies

Gaming

Programming