Next.js Discord

Discord Forum

Uncaught Error: PrismaClient is unable to be run in the browser error while using "use client"

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
I am trying to make a form and i need use "use client" on my code. But when i add "use client" Uncaught Error: PrismaClient is unable to be run in the browser i get this error.

Also that page on my /app/form/page.tsx path.
Answered by Common House-Martin
I would extract the form into a new client component
View full answer

21 Replies

Common House-Martin
you can't do prisma queries in a client component, database queries are to be done in server side
@Common House-Martin you can't do prisma queries in a client component, database queries are to be done in server side
Cape lionOP
i dont prisme queries already, but i am using
const session = await getServerSession(authOptions);
    if (!session) return (
        <div className="z-10 w-full max-w-xl px-5 xl:px-0">
            <h1
                className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem]"
                style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
            >
                You must log in to access this page.
            </h1>
        </div>
    )

on my page so is that why?
Common House-Martin
that's because you're using await to fetch your data and client components can't be async therefore you can't use await in a client component
instead you could do a useEffect and inside it getServerSession().then like you would normally do in react
@Common House-Martin that's because you're using await to fetch your data and client components can't be async therefore you can't use await in a client component
Cape lionOP
It giving error when i add "use client", and i need "use client" when i am using useEffect, right?
Uncaught (in promise) Error: PrismaClient is unable to be run in the browser.

Now it gives this error.
show the entire file code
Cape lionOP
There
@Common House-Martin yes
Cape lionOP
Like i said when i add "use client" i get some stupid errors lol
Common House-Martin
ok so this is a server component
you can't use client component functions like onSubmit
remove use client
and instead of onSubmit do action
you can't use react hooks in here either
you're mixing a client component with a server component
Cape lionOP
So what need i do exactly?
@Cape lion So what need i do exactly?
Common House-Martin
I would extract the form into a new client component
Answer
Common House-Martin
so that you can use onSubmit
Cape lionOP
Oh yeah, thanks really man