WPのブロックエディタでUncaught Error: Minified React error #321のエラー:メモ

以前やらかしたのにまたやらかしたのでメモとして。

前提

• WordPressで自作ブロック作成
• useEffectやInnerBlocksを使用

発生したエラー

下記のエラーが開発者ツールのコンソールに表示されます。

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

上記内のURLで以下のように、フックの呼び出し位置がおかしいという内容が確認できます。

• React – Error Decoder

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

ちなみにこの状態になるとページが真っ白になり、該当の投稿画面が一切表示されず入力内容の確認が不可能となり、投稿画面からでは調査できません。

開発者ツールのコンソールから情報を得られますし、投稿画面から調査できる類の原因ではないのですが、余裕が無い時に真っ白な画面をみてしまうとなかなかの八方塞がり感です。

対応方法

• useEffectの記述位置
• save.js内のInnerBlocks

個人的にはこの２つが経験した原因となります。

useEffectの記述位置

• Invalid Hook Call Warning – React

useEffectに関しては上記に実例が載っているため、確認することで概ね解決できると思います。

save.js内のInnerBlocks

return (
  <div { ...blockProps }>
    <InnerBlocks />
  </div>
)

上記のようにedit.jsと同じように書いてしまっているのが原因となりますので、以下のように書き換えることで解決できます。

return (
  <div { ...blockProps }>
    <InnerBlocks.Content />
  </div>
)

これはRichTextでも同様で、save.js内ではRichText.Contentと書く必要があります。

結び

save.js内の記述ミスの方は、edit.jsの記述をコピーしてsave.js用に書き換えるという手順をとることが多いため、割とやらかしてしまいます。