Help with a build error when trying to get user in a component but the same code works in another?

[peak badger]

I am working on a project where I need to be able to pull in a slug from a dynamic url, but also want to be able to check against a logged in user, so that if you are on your own profile you can edit it. I have got the code to work fine with my navBar component but not with the userProfile component.

https://gist.github.com/defiantbydesign/70691c080998e4aacb58785c38c6ce60

[glossy aurora]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• UI Field
• Edit View - Custom Components - editMenuItems - Client Component
• Managing User Preferences - Use Cases

Community-Help:

• ERROR: netlify deployment nextjs and payloadCMS
• Array relations broken since 3.26 with MongoDB
• How to secure the Payload API
• PayloadComponent not found in importMap: @payloadcms/storage-s3/client#S3ClientUploadHandler

[charred lion]

why is the error on sharp library tho? what is your sharp version

[peak badger]

This is a fresh payload install. I think the biggest issue I have is it works in other components just not this. I assume it is because of the 'use client' on the page.tsx but I cant figure out how else to get url params

[raw willow]

Yeah you’re trying to use a client component as a parent with a server child component, that won’t work.

[raw willow]

https://nextjs.org/docs/app/api-reference/file-conventions/page#params-optional

[peak badger]

what would my approach be? I am sort of learning React, Next, and Payload all at once

[raw willow]

Take a look at the link I shared above.

[peak badger]

I looked it over, that doesn't really give me much info tho. I am able to pass the param just fine. if I remove the code that will get the logged in "user" from payload it works fine. The params doesnt seam to be the issue, unless I am misunderstanding something here

[raw willow]

The reason removing the code for the logged in user works is because that allows the component to automatically be a client component. Keeping that code requires the component to be a server component, which isn’t possible if its parent is already a client component.

[peak badger]

ahh ok.

[raw willow]

Basically rule of thumb is if the parent component is a client component then all child components must also be a client component.

[peak badger]

so can I make the UserProfile.tsx component a client component?

[raw willow]

If you use the approach I mentioned for getting the params, that will allow you to remove ‘use client’ from page.tsx, thus keeping it a server component.

[peak badger]

and leave the parent a server

oh! ok I will try that

[peak badger]

Thank you @raw willow that fixed everything