Next.js Discord

Discord Forum

It is not allowed to define inline "use server" annotated Server Actions in Client Components

Answered
Chinese Alligator posted this in #help-forum
Open in Discord
Chinese AlligatorOP
Don't know if I am using server actions correctly. But I keep getting this error. Is this file not a server component? Can someone tell me why?


This is from a folder named slices in the app directory.



import { Content } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";
import { createCustomer } from "api/customerApi";

/**
 * Props for `CallToAction`.
 */
export type CallToActionProps = SliceComponentProps<Content.CallToActionSlice>;

const CallToAction = ({
  slice,
  slice: { primary, variation },
}: CallToActionProps): JSX.Element => {
  async function create(formData: FormData) {
    "use server";
    
  }

  return (
    <section
      className="m-4 text-black"
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <p className="mb-4 text-white">{description}</p>
      <form action={create}>
        ... input is here
        <button className="text-white p-2 bg-slate-700">
          {primary.action_button_text}
        </button>
      </form>
    </section>
  );
};

export default CallToAction;
Answered by Chinese Alligator
Anyways I fixed the problem by just making the component a client component and importing the server action in.
View full answer

7 Replies

riský
where are you using CallToAction... is it in a client component (/is that also)
@riský where are you using `CallToAction`... is it in a client component (/is that also)
Chinese AlligatorOP
import { components } from "../slices";
import { createClient } from "prismicio";
import { SliceZone } from "@prismicio/react";

const Page = async () => {
  const client = createClient();

  // more code

  return <SliceZone slices={slices} components={components} />;
};

export default Page;


This SliceZone calls the CallToAction, I figured since its successfully being rendered in a page component it must be a server component also.
riský
go up the import tree (files that import the other files) and see if there is any "use client" at the top
Chinese AlligatorOP
I looked at the sliceZone component on github, I don't see any occurrence of "use client" ( hopefully this is what you meant ).

https://github.com/prismicio/prismic-react/blob/master/src/SliceZone.tsx
riský
wait so this isn't nextjs?
Chinese AlligatorOP
Sorry for the late response, no it is nextjs. SliceZone is component provided by prismic which is CMS tool.

Here is my relevant project structure

|--app
|--(store)
|--slices

I think it is a bug because it works in development but fails the production build.
Chinese AlligatorOP
Anyways I fixed the problem by just making the component a client component and importing the server action in.
Answer