the error means prisma is trying to run in the front end which you cant do

did you try this? https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices

Where did you use it

Wheres the code

So I have a SubmitForm.tsx component that I'm importing into my <Navigation /> component that's imported in layout.tsx, which looks like this:

import { prisma } from '@/lib/prisma'

export function SubmitForm() {
  function onSubmit(data: z.infer<typeof formSchema>) {
    const product = prisma.product.create(data)
  }
}

ah do I need to use getServerSideProps?

not sure I fully understand the reason it works directly in a page.tsx file, but not in a component

is the page.tsx file rendered on the server or something?

wait are you using pages or app router? i thought you had a layout.tsx?

app router

ok getServerSideProps is depreciated in app router

route handlers are the new version of that right?

no route handlers replace api routes but they are basically the same thing

ah ok

so first of all, does it make sense why prisma works in page.tsx files but not in a component?

because page.tsx is a server component by default

while a component, can be a client component which prisma can't run

ah ok, that makes sense then

SubmitForm might be used in a client component which renders the prisma unusable since SubmitForm becomes client component

basically what emerald said

i don't have any use client anywhere in my app, maybe it's from a dependency?

(e.g. react-hook-router, zod, shadcn?)

in your situation where you are in a client component and want to update the db you have two options:
1. (traditional) - make a route handler to handle prisma create.
2.(newer) use Server Actions

just check if SubmitForm has been used somewhere

right click and Find All References

hope that helps a bit. im a noob but have done a lot of prisma stuff. @aardani is the pro! sorry if im stepping on your toes

hmm does this mean anything to you guys?

Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

node_modules/.pnpm/@radix-ui+react-direction@1.0.1_@types+react@18.2.8_react@18.2.0/node_modules/@radix-ui/react-direction/dist/index.mjs (4:82)

appreciate both your help, thanks man

yeah it looks like you're trying to use server API into the client somehow

ok super weird, I found a 'use client' inside my Navbar component (although I don't recall putting it there), but when i remove it, i get that error i posted above

ok i got it

shadcn uses radix so probably something to do with that. without context its hard to debug. stabbing in the dark i'd say you tried to use a shadcn component that needs client interaction in a server component

if possible isolate the shadcn component in a new file, mark it as use client and import it back into the server component parent

exactly hahahahaha

ah ok, I thought shadcn supports SSR rendering though? that was the whole reason i switched from chakra lol

they do?

which component are you referring to?

what component is it?

navigation-menu

ah

i understand

if I don't use client at the top of that component, it breaks?

it breaks

so "use client" is needed to maket he component interactive

^

ah ok, so that's why prisma wasn't working inside the form in my navbar

🙂

you can't use prisma in client components but it seems like you are trying to do something at run-time, which is evident by the onClick.

its better to use Server Action for that

because you are using prisma in the client components

this has nothing to do with SSR

Server Action or a route handler if you're less comfortable with server actions

server action would be the ideal way to do this. submit the data in a form and handle it server side essentially

yeah i got it, didn't realize that shadcn did actually require use client for some things

yeah its a bit confusing

haven't used server actions yet but willing to give it a try over route handlers

any recommendations of how to structure server actions?

a simple way to think of it is that if it requires client interaction then it probably needs 'use client' some ui libs add 'use client' to all their components.

like app/actions/products/{create,get,delete}?

You are trying to use a server-only code inside a client component. that is why it breaks.
You can't mix onClick code together with SSR since SSR means getting code ready at request time meanwhile onClick is something that is run after the request time, which is at runtime.
Therefore it has nothing to do with SSR and i think you have misunderstanding with what "supports SSR" means too

what I'm saying is I didn't realize that shadcn required use client for any of its components

most simples setup is lib/action.ts or just create action.ts and colocate it where its needed.
You can also pass server action from server component to the client componetn

yes but note that that doesnt make it not support SSR 🫠

you're confusing me 😂

*more

describing how to make a server action for your situation is not quick. i'd watch some videos on it and plan your data structure. an overview would be: make a form in a client component that sends the data and then make another file somewhere eg CreateProductAction.tsx, put 'use server' at the top, validate/parse the data then run prisma.create

doesn't sound too complicated, ok I'll give that a try

gl!

thanks for the help guys o7

this is my first time using a lot of these features in next, so it's all very new still

word of warning - handling errors in server actions can be a bit tricky and limited currently so if you need more flexible error handling or validation you might find route handlers easier at first

its a common point people trip on, you're doing good!