Drizzle ORM + Vite-react - Postgres.js TypeError: Cannot read properties of null (reading 'Socket')

Question

I'm using Drizzle ORM on my vite-react web app and running into a TypeError: Cannot read properties of null (reading 'Socket') error. I'm spinning up postgres from docker and can confirm the db connection is correct because db:push works with my drizzle-orm schema. I'm just trying to create a simple aysnc component to test everything together but keep getting the Socket error. I've tried about everything here https://stackoverflow.com/questions/70714690/buffer-is-not-defined-in-react-vite which fixed the buffer issue but not the Socket issue. Any help would be appreciated.

schema.js

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

export const testing = pgTable("testing", {
  id: serial("id").notNull().primaryKey(),
  name: varchar("name", { length: 256 }),
});

index.js

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

// DB connection
const queryClient = postgres(import.meta.env.VITE_DB_CONNECTION_STRING);
const db = drizzle(queryClient, { schema });

export { db };

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { nodePolyfills } from "vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [nodePolyfills(), react()],
});

testingDB.jsx

import React, { useState, useEffect } from "react";
import { db } from "../../db";

export default function TestingDb() {
  const [testing, setTesting] = useState(null); 

  useEffect(() => {
    const fetchTesting = async () => {
      const result = await db.query.testing.findFirst();
      setTesting(result);
    };
    fetchTesting();
  }, []); 

  return (
    <div>
      {testing ? (
        <div key={testing.id}>{testing.name}</div> 
      ) : (
        <p>No data found</p>
      )}
    </div>
  );
}