Create an exception for the eslint rule regarding server actions

[shyuuuuni]

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"

[roginfarrer]

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