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に本来渡しちゃいけないクラスを渡すことになるので、エラーが発生していた。
ということだと自分では解釈している。
おしまい。