「Uncaught Error: Only plain objects, and a few built-ins, can be passed to Server Actions.」のエラー解消方法

Next.jsでServer Actionを使用しようとしたところ以下のエラーに遭遇。

Uncaught Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

どういう場面でこのエラーが発生したかというと、
以下のようにボタンのonClickにServer Actionを設定して、クリックされたらServer Actionが発火するようにしていた。

import {serverActionSample} from '..省略..' <button onClick={serverActionSample}> ボタン </button>

onClickへの設定の仕方が悪く、抜粋すると下記の部分が直接の原因だった。

onClick={serverActionSample}

以下のように修正すると治った。

import {serverActionSample} from '..省略..' <button onClick={() => serverActionSample()}> // ここを変更!! ボタン </button>

何がいけなかったか

エラー文にもあるようにServer Actionへの引数は、単純なオブジェクトしか渡せない。(FormDataなど一部渡せるものもあるが基本はオブジェクトのみ)

Uncaught Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

なのでメソッドを持ったクラスなどは渡せない。

この制約を破ったのでエラーとなっていた。

だが、今回エラーとなった実際のServer Actionは引数を受け取らないようにしていた。

'use server' export async function serverActionSample() { console.log('サンプル') }

そもそも何も渡してないから動きそうなもんなのに何故エラーでるの?って思ったけど、onClickへの設定方法がまずかった。

問題の設定部分を再掲。

onClick={serverActionSample}

上のこの書き方だと以下のような感じで実行時に処理される。
結果意図せずイベントハンドラーの引数を受け入れてServer Actionを使うことになってしまう。

onClick={(event: React.MouseEventHandler<HTMLButtonElement>) => { // この部分は多分厳密には違うけどイメージはこんな感じ serverActionSample(event) } }

そうすると、Server Actionに本来渡しちゃいけないクラスを渡すことになるので、エラーが発生していた。
ということだと自分では解釈している。

おしまい。