Next.js Discord

Discord Forum

can't resolve 'net'

Answered
West Siberian Laika posted this in #help-forum
Open in Discord
Avatar
West Siberian LaikaOP
I made this simple button with the only purpose of deleting a product, but it breaks my project whenever I import it to my admin page.
this error seems to be related to my postgres package which I use to interact with my supabase db.

All related code (I use app router):
src/components/ui/dashboard/delete-button.tsx
"use client";
import { deleteProduct } from "@/lib/actions";
import { Button } from "../button";
import { useState } from "react";

export const DeleteProduct = (props: any) => {
  const [error, setError] = useState(null);
  const id = props.id;
  async function handleDelete(e: any) {
    const result = await deleteProduct(id);
    if (!result) {
      setError(e.error);
    }
  }
  return <Button onClick={() => handleDelete} />;
};

src/lib/actions.ts
import { revalidatePath } from "next/cache";
import sql from "../../db";

export async function deleteProduct(id: any) {
  try {
    const product = await sql`
      delete from products 
      where id = ${id};
    `;
    revalidatePath("/admin");
    return product;
  } catch (e) {
    console.log("Error deleting product: ", e);
    throw e;
  }
}

I call the button in this component:
src/app/admin/page.tsx
import { DeleteProduct } from "@/components/ui/dashboard/delete-button";
import { Products } from "@/components/ui/dashboard/products";
import { getProducts } from "@/lib/actions";

export default async function Page() {
  const products = await getProducts(100);
  return (
      {products?.map((product) => (
        <>
          <Products
            title={product.title}
            imageurl={product.imageurl}
            price={1000}
          />
          <DeleteProduct id={product.id} />
        </>
      ))}
  );
}
Image
Answered by joulev
Add "use server" at the top of the actions.ts file
View full answer

15 Replies

Avatar
@West Siberian Laika I made this simple button with the only purpose of deleting a product, but it breaks my project whenever I import it to my admin page. this error seems to be related to my `postgres` package which I use to interact with my supabase db. All related code (I use app router): `src/components/ui/dashboard/delete-button.tsx` "use client"; tsx import { deleteProduct } from "@/lib/actions"; import { Button } from "../button"; import { useState } from "react"; export const DeleteProduct = (props: any) => { const [error, setError] = useState(null); const id = props.id; async function handleDelete(e: any) { const result = await deleteProduct(id); if (!result) { setError(e.error); } } return <Button onClick={() => handleDelete} />; }; `src/lib/actions.ts` tsx import { revalidatePath } from "next/cache"; import sql from "../../db"; export async function deleteProduct(id: any) { try { const product = await sql` delete from products where id = ${id}; `; revalidatePath("/admin"); return product; } catch (e) { console.log("Error deleting product: ", e); throw e; } } I call the button in this component: `src/app/admin/page.tsx` tsx import { DeleteProduct } from "@/components/ui/dashboard/delete-button"; import { Products } from "@/components/ui/dashboard/products"; import { getProducts } from "@/lib/actions"; export default async function Page() { const products = await getProducts(100); return ( {products?.map((product) => ( <> <Products title={product.title} imageurl={product.imageurl} price={1000} /> <DeleteProduct id={product.id} /> </> ))} ); }
Avatar
Add "use server" at the top of the actions.ts file
Answer
Avatar
@joulev Add "use server" at the top of the actions.ts file
Avatar
West Siberian LaikaOP
Wow, I searched many forums but no one suggested that, what was the cause of this? I thought Nextjs components are server components by default.
Avatar
Server components arent the same as server actions.
Avatar
@West Siberian Laika Wow, I searched many forums but no one suggested that, what was the cause of this? I thought Nextjs components are server components by default.
Avatar
delete-button is a client component, so you were asking your app to run the sql query on the browser which obviously doesn’t work
Avatar
West Siberian LaikaOP
Thank you so much guys @joulev @Arinji I was also gonna ask you why my button wasn't working but I realized I wasn't calling the function properly lol
Avatar
No worries, mark a solution :D
Original message was deleted
Avatar
boop
Avatar
West Siberian LaikaOP
ofc, I'll also give it a better name
Avatar
Giant panda
import { deleteProduct } from "@/lib/actions";
import { Button } from "../button";
import { useState } from "react";

export const DeleteProduct = (props: any) => {
  const [error, setError] = useState(null);
  const id = props.id;
  async function handleDelete(e: any) {
    const result = await deleteProduct(id);
    if (!result) {
      setError(e.error);
    }
  }
  return <Button onClick={() => handleDelete} />;
};
why you are passing the function like that when it doesn't have params
:meow_stare:
"use client";

import { deleteProduct } from "@/lib/actions";
import { Button } from "../button";
import { useState } from "react";

export default function DeleteProduct(props: any) {
  const [error, setError] = useState(null);
  const id = props.id;
  async function handleDelete(e: any) {
    const result = await deleteProduct(id);
    if (!result) {
      setError(e.error);
    }
  }
  return (
    <Button variant={"destructive"} onClick={() => handleDelete(id)}>
      Delete
    </Button>
  );
}
just added parenthesis to click event
It works so I probably won't touch it for the next 10 light years
Avatar
Giant panda
great