【Chakra UI】Unexpected return value from a callback ref in xxxの解決方法

問題

1年前に作ったTodoアプリを開いたところ、Chrome DevToolsのコンソールに以下の警告が表示されました。

installHook.js:1 Warning: Unexpected return value from a callback ref in button. A callback ref should not return a function. Error Component Stack
    at button (<anonymous>)
    at DialogContent2 (dialog.tsx:16:5)
    at RegistrationDialog (RegistrationDialog.tsx:39:3)
    at div (<anonymous>)
    at App (App.tsx:14:27)

React DevTools拡張を一旦削除したところ、installHook.jsの部分は消えましたが、同じ警告が引き続き表示されました。

Warning: Unexpected return value from a callback ref in button. A callback ref should not return a function.

解決方法

まず、npm outdatedで依存パッケージのバージョンを確認します。

// ターミナル
% npm outdated

Chakra UI、emotion、react、react-domが古い場合は、以下のコマンドで最新版にアップデートします。

// ターミナル
npm install @chakra-ui/react@latest @chakra-ui/system@latest @chakra-ui/button@latest @emotion/react@latest @emotion/styled@latest react@latest react-dom@latest

これで警告が解消される場合が多いです。

フロントエンドの依存パッケージのバージョン不整合が根本原因のようです。
（package.jsonやpackage-lock.jsonの更新、npm installのタイミングで依存関係が変わった可能性があります）

終わりに

依存パッケージのバージョン確認と定期的なアップデートの重要性を実感しました。