'not allowed to define inline "use server" in Client components error' in my Server component
Answered
West African Lion posted this in #help-forum
West African LionOP
Here is a stripped version of my component:
Why am I getting this error when I have no issues doing this on my other page?
export function EditableLeadStatusBadge({
status,
leadId,
}: EditableLeadStatusBadgeProps) {
const updateStatus = async (clicked: Lead['status']) => {
'use server';
await db
.update(leads)
.set({ status: clicked })
.where(eq(leads.id, leadId));
};
return (
<ServerSelect
value={status}
onValueChange={async (clicked) => {
await updateStatus(clicked as Lead['status']);
}}
successMessage='Status updated successfully'
errorMessage='Failed to update status'
>
...
</ServerSelect>
);
}
Why am I getting this error when I have no issues doing this on my other page?
<ServerInput
label='City'
defaultValue={site.city}
onSave={async (city) => {
'use server';
...
}}
placeholder='City'
/>
9 Replies
Can you send error?
West African LionOP
Sure
Error:
× It is not allowed to define inline "use server" annotated Server Actions in Client Components.
│ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
│
│ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
│
╭─[/Users/anthonyriley/Projects/grove/components/ui/leads/lead-status-badge.tsx:58:1]
58 │ leadId,
59 │ }: EditableLeadStatusBadgeProps) {
60 │ const updateStatus = async (clicked: Lead['status']) => {
61 │ 'use server';
· ────────────
62 │ await db
63 │ .update(leads)
64 │ .set({ status: clicked })
╰────
Import trace for requested module:
./components/ui/leads/lead-status-badge.tsx
./components/ui/leads/leads-table.tsx
× It is not allowed to define inline "use server" annotated Server Actions in Client Components.
│ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
│
│ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
│
╭─[/Users/anthonyriley/Projects/grove/components/ui/leads/lead-status-badge.tsx:58:1]
58 │ leadId,
59 │ }: EditableLeadStatusBadgeProps) {
60 │ const updateStatus = async (clicked: Lead['status']) => {
61 │ 'use server';
· ────────────
62 │ await db
63 │ .update(leads)
64 │ .set({ status: clicked })
╰────
Import trace for requested module:
./components/ui/leads/lead-status-badge.tsx
./components/ui/leads/leads-table.tsx
You've to do as it says
West African LionOP
Is there a reason this component could be marked as a Client component? because it's a Select?
Its parent component might be a client component
Answer
West African LionOP
Oh that makes sense thank you
Mark solution please
West African LionOP
Thanks for the quick response!