PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in `unknown`) when Updating

Question

I was trying to update a a single field in my database using server-actions + tanstackQuery but I get this error

Error: PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in unknown). If this is unexpected, please open an issue: https://pris.ly/prisma-prisma-bug-report at Object.get (index-browser.js:203:15) at getDataById (get-all-apointment.ts:55:27) at approvedStatus (update-status.ts:11:45) at Object.mutationFn (admin-column.tsx:140:62) at Object.fn (mutation.js:72:29) at run (retryer.js:92:31) at Object.start (retryer.js:133:9) at Mutation.execute (mutation.js:107:40)

So what I did is I created a server action and then use tanstack query to execute it, but when I press the approved button I get this error.

this is the field in my column

export type Events = {
  id: string;
  title: string;
  email: string;
  fullName: string;
  contactPerson: string;
  department: string;
  status: string;

  dateOfEvent: string;
  startingTime: string;
  endingTime: string;

  purpose: string;

  doesHaveDryRun: boolean;
  dryRunDate?: string | null; // Optional
  dryRunStart?: string | null; // Optional
  dryRunEnd?: string | null; // Optional

  doesHaveTCETAssitance: string;
  tcetOtherAssitance?: string | null; // Optional

  meetingTypeOption: string;
  meetingTypeServices: string;
  meetingTypeServiceLink?: string | null; // Optional
  cameraSetup?: string | null; // Optional
};

export const columns: ColumnDef<Events>[] = [
/* Other columns */
  {
    id: "actions",

    cell: ({ row }) => {
      const data = row.original;
      const router = useRouter(); // Get the router

      const { mutate: approvedButton } = useMutation({
        mutationFn: async (id:string) => await approvedStatus(id),
        onError: (error) => {
          console.log(error);
        },
        onSuccess: () => {
          router.push("/admin/calendar");
          router.refresh();
        },
      });


      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>

            <DropdownMenuItem
              onClick={() => router.push(`/admin/edit/${data.id}`)}
            >
              <PanelRightCloseIcon className="mr-2 h-4 w-4" />
              View Details
            </DropdownMenuItem>

            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <UserPlus className="mr-2 h-4 w-4" />
                <span>Update</span>
              </DropdownMenuSubTrigger>
              <DropdownMenuPortal>
                <DropdownMenuSubContent>
                <DropdownMenuItem onClick={() => approvedButton(data.id)}>
                    <Check className="mr-2 h-4 w-4 text-emerald-600" />
                    <span>Approved</span>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <CircleDot className="mr-2 h-4 w-4 text-rose-600" />
                    <span>Pending</span>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  
                </DropdownMenuSubContent>
              </DropdownMenuPortal>
            </DropdownMenuSub>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <Trash2 className="mr-2 h-4 w-4" />
              Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];

Now this is my server-actions.

export const approvedStatus = async (id:string) => {
    try {
        const isExisting = await getDataById(id)
        if(!isExisting) return {error: "Data not existing"}

        await db.appoinmentSchedule.update({
            where: {
                id: id
            },
            data: {
                status: 'approved'
            }
        })

        return {succcess: "Event has successuffly updated!"}
    } catch (error) {
        console.log(error)
        throw error
   
    }
}

Answer 1

Prisma is a server-side solution is not meant to be run in the browser, or in client-facing pages.

You probably need to add 'use server' at the top of files that reference Prisma to ensure they are not used in the client-facing bundle, and 'use client' in your client-facing pages to fully differentiate them.