CODEWITHSUNDEEP
reactjstypescriptnext.js13bun
prismo
prismo

Reputation: 1899

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

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:

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!

Upvotes: 3

Views: 2476

Answers (3)

Feng Liu
Feng Liu

Reputation: 1022

I fix this by comment out the line

export const runtime = "edge"

at apps/nextjs/src/app/api/trpc/[trpc]/route.ts

I know it's something like next trying to run backend code in frontend like others say. But it's not working for me when I try put net: false in next.config.js.

Then I compare a working project with the not working project line by line. I found out the working project has the above line disabled. Just like magic.

Upvotes: 2

user25067276
user25067276

Reputation: 21

The right solution is to put 'use server' on the backend file you want to access if you are using server actions or use an API to establish a network connection to your backend (even on the same pc). Do not try to access a function in the frontend directly from the backend

Upvotes: 2

Yusuf Shadiq
Yusuf Shadiq

Reputation: 31

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

Upvotes: 3

Related Questions