Axelin Posts - Answer Overflow

Axelin

•Created by Axelin on 8/11/2024 in #help

NEXTJS: module not found: net

hey guys, i've been trying drizzle with react query within the app router. everything works great on the server components, but it throws an error: 'module net is not defined' when i try to use the same query function on the client. ill provide some code: this is how i create my drizzle client:

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
  throw new Error("DATABASE_URL is not set");
}
const client = postgres(connectionString);

export const db = drizzle(client);

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
  throw new Error("DATABASE_URL is not set");
}
const client = postgres(connectionString);

export const db = drizzle(client);

this is my query function (works on server but not on client):

import { db } from "@/lib/drizzle";
import { provincia } from "@/lib/drizzle/schema";
import { cache } from "react";

const getProvincias = cache(async () => {
  try {
    const provincias = await db.select().from(provincia);
    return provincias;
  } catch (error) {
    console.error(error);
  }
});

export default getProvincias;

import { db } from "@/lib/drizzle";
import { provincia } from "@/lib/drizzle/schema";
import { cache } from "react";

const getProvincias = cache(async () => {
  try {
    const provincias = await db.select().from(provincia);
    return provincias;
  } catch (error) {
    console.error(error);
  }
});

export default getProvincias;

this is how im fetching data on page.tsx (works fine)

const Page = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });
  
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <div className="flex w-full flex-col gap-4 max-w-[1000px] m-auto">
        <NuevoCampoSteps />
      </div>
    </HydrationBoundary>
  );
};

const Page = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });
  
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <div className="flex w-full flex-col gap-4 max-w-[1000px] m-auto">
        <NuevoCampoSteps />
      </div>
    </HydrationBoundary>
  );
};

this is how im fetching on client component (throws module not found error):

  const { data: provincias } = useQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });

  const { data: provincias } = useQuery({
    queryKey: ["provincias"],
    queryFn: getProvincias,
  });

why does it throw an error when fetching client side? is there any way i can use the same query function server and client side? or do i have to create an api endpoint for client side fetching? thanks!

3 replies

Gaming

Programming