Form Error: Invalid Server Actions request.

[Lance Armah-Abraham]

I am trying to submit a form but I am getting this error from nextjs Error: Invalid Server Actions request..

I am on Next.JS 14.2.4.

This is my code for my action and form.

// page.tsx
import { TestForm } from './Form'

export default function Page() {
	return (
		<div>
			<TestForm />
		</div>
	)
}


// Form.tsx
'use client'

import { useServerAction } from 'zsa-react'

import { signInAction } from '@/lib/actions/auth'

export const TestForm = () => {
	const { isPending, executeFormAction, data, error } =
		useServerAction(signInAction)

	return (
		<form action={executeFormAction}>
			<input name="email" type="email" />
			<input name="password" type="password" />
			<button disabled={isPending}>Submit</button>
		</form>
	)
}

// lib/actions/auth.ts
'use server'

import z from 'zod'
import { createServerAction } from 'zsa'

export const signInAction = createServerAction()
	.input(
		z.object({
			email: z
				.string({ required_error: 'Email is required' })
				.email('Must be a valid email address'),
			password: z
				.string({ required_error: 'Password is required' })
				.min(8, 'Must be at least 8 characters')
				.max(64, 'Must not exceed 64 characters'),
		}),
		{ type: 'formData' },
	)
	.handler(async ({ input }) => {
		// Sleep for .5 seconds
		await new Promise((resolve) => setTimeout(resolve, 500))
		// Increment the input number by 1
		return 'I have not been implemented yet, please wait for a while'
	})

Also, I am seeing this in the browser dev tools when I check my form:

[Lance Armah-Abraham]

I tried with the execute function and it's also giving the same error.

const { isPending, execute, data, error } = useServerAction(
		signInAction,
	)
	
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
		event.preventDefault()

		const form = event.currentTarget
		const formData = new FormData(form)

		const [data, err] = await execute(formData)
		if (err) {
			toast({ message: err.message, type: 'error' })
			return
		}
	}

[Ido Pesok]

Hi, are server actions working in general for you? Can you try one without ZSA?

[Lance Armah-Abraham]

Hi, are server actions working in general for you? Can you try one without ZSA?

Hi, I checked and it does not work so it looks like server actions are not working for me in general even without zsa. I have to find out why. So it's probably not related to the package and it's from nextjs or react I think.

[Lance Armah-Abraham]

It looks like it's not an issue with zsa so will close this issue. Thanks.