reactjs - Modul ikke fundet: Kan ikke finde 'net' i Next.js med PostgreSQL

Jeg støder på et problem i mit Next.js-projekt, når jeg prøver at hente alle poster fra en tabel. Fejlmeddelelsen, jeg får, er "Module not found: Can't resolve 'net'" med en importspor, der peger på flere filer i mit projekt. Her er de relevante oplysninger:

 ⨯ ./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"
  }
}

Jeg har prøvet forskellige fejlfindingstrin, herunder:

  • Tjekker mine afhængigheder, TypeScript-konfiguration og Next.js-version.

Bekræfter, at patientService.list() -metoden fungerer, når den køres som et script ved hjælp af bun run, hvilket indikerer, at PostgreSQL-forbindelsen fungerer korrekt uden for NextJs. Jeg tilføjer også poster til databasen via NextJs.

På trods af disse bestræbelser fortsætter problemet, når den samme kode køres inden for Next.js. Enhver indsigt eller forslag vil blive meget værdsat. Tak!

Svar #1

Jeg havde det samme problem med drizzle og Nextjs pages router.

Løsningen for mig var at omstrukturere koden til en API-rute.

Det er sandsynligvis fordi postgres-pakken ikke understøtter at blive importeret til klientsiden. håber det hjælper

Svar #2

Den rigtige løsning er at sætte 'use server' på backend-filen, du vil have adgang til, hvis du bruger serverhandlinger, eller bruge en API til at etablere en netværksforbindelse til din backend (selv på den samme pc). Forsøg ikke at få adgang til en funktion i frontend direkte fra backend.

Relaterede artikler