405 (Method Not Allowed) when using Server Actions

[eliw00d]

I am trying to set up a simple Server Action that uses a KV namespace. However, I get a 405 (Method Not Allowed) any time the Server Action is used.

This is the simplest way I've been able to reproduce:

app/repro/action.ts

'use server'

export default async function action(formData: FormData) {
  console.log('repro', formData.get('repro')?.toString())
}

app/repro/page.tsx

'use client'

import action from './action'

export default function Page() {
  return (
    <form action={action}>
      <input name="repro" type="text" />
      <button type="submit">Submit</button>
    </form>
  )
}

Even though I am not doing anything other than using console.log, I still get the error.

If I run yarn dev instead of yarn pages:dev, it works. However, I am then unable to test the KV namespace locally if I add that back in. I have also tried deploying to production to see if maybe it is just a local issue, but to no avail.

This is what my yarn pages:dev looks like: npx wrangler pages dev .vercel/output/static --compatibility-date=2023-10-30 --compatibility-flag=nodejs_compat --kv=MY_KV

Any thoughts?

[eliw00d]

I realized that I needed to have the page.tsx use the edge runtime and then created a separate Client Component named form.tsx that page.tsx uses instead. That fixed it.

[sha256]

Thanks man!