Module not found: Can't resolve 'net' in Next.js with PostgreSQL

Question

I'm encountering an issue in my Next.js project when trying to fetch all records from a table. The error message I'm getting is "Module not found: Can't resolve 'net'" with an import trace that points to several files in my project. Here are the relevant details:

 ⨯ ./node_modules/postgres/src/connection.js:1:0
Module not found: Can't resolve 'net'

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

Import trace for requested module:
./node_modules/postgres/src/index.js
./src/db/index.ts
./src/db/queries.ts
./src/components/PatientsTable.tsx
./src/app/patients/page.tsx

import { patientService } from "@/db/queries";

export default async function PatientsTable() {
  const patients = await patientService.list();
  
  return <div></div>;
}

import PatientsTable from "@/components/PatientsTable";
import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <PatientsTable />
      </Suspense>
    </div>
  );
}

queries.ts

import { sql } from "drizzle-orm";
import db from ".";
import { patients, NewPatient, Patient } from "./schemas";

export const patientService = {
  list: async () => {
    const retrievedPatients = await db.select().from(patients);
    return retrievedPatients;
  },
}

package.json

{
  "name": "sample_proj",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "migration:generate": "drizzle-kit generate:pg --schema=./src/db/schemas.ts",
    "migration:apply": "bun run src/db/migrate.ts"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@tanstack/react-query": "^5.4.3",
    "@tanstack/react-query-devtools": "^5.4.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "drizzle-orm": "^0.28.6",
    "drizzle-zod": "^0.5.1",
    "lucide-react": "^0.290.0",
    "next": "13.5.7-canary.36",
    "postgres": "^3.4.2",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.47.0",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "dotenv": "^16.3.1",
    "drizzle-kit": "^0.19.13",
    "eslint": "^8",
    "eslint-config-next": "14.0.0",
    "pg": "^8.11.3",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

I've tried various troubleshooting steps, including:

• Checking my dependencies, TypeScript configuration, and Next.js version.

Verifying that the patientService.list() method works when ran as a script using bun run, indicating that the PostgreSQL connection is functioning correctly outside of NextJs. I am also add records to the database via NextJs.

Despite these efforts, the issue persists when running the same code within Next.js. Any insights or suggestions would be greatly appreciated. Thank you!

Answer 1

I had the same problem with drizzle and Nextjs pages router.

The solution for me was to refactor the code to an API route.

Probably it is because the postgres package does not support being imported to the client side. hope it helps