eslint-plugin-react-server-components icon indicating copy to clipboard operation
eslint-plugin-react-server-components copied to clipboard

Create an exception for the eslint rule regarding server actions

Open shyuuuuni opened this issue 1 year ago • 1 comments

Using server action, we can pass functions as props in server components.

The example below is taken from the Next.js server action post.

export default function Page() {
  async function createInvoice(formData: FormData) {
    'use server'
 
    const rawFormData = {
      customerId: formData.get('customerId'),
      amount: formData.get('amount'),
      status: formData.get('status'),
    }
 
    // mutate data
    // revalidate cache
  }
 
  return <form action={createInvoice}>...</form>
}

The lint rule is triggered at the <form action={createInvoice}>...</form> part of the example above.

  • Functions can only be passed as props to Client Components. Add the "use client" directive at the top of the file to use it.eslint(react-server-components/use-client)

package version

  • "next": "14.2.4"
  • "react": "^18"
  • "eslint": "^8"
  • "eslint-plugin-react-server-components": "^1.2.0"

shyuuuuni avatar Jul 10 '24 04:07 shyuuuuni

PRs welcome! Otherwise I'll try to get to this sometime soon.

roginfarrer avatar Jul 19 '24 20:07 roginfarrer