Skip to content

Create an exception for the eslint rule regarding server actions #12

@shyuuuuni

Description

@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"

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions