😵

React のコンポーネントライブラリを開発する際に起こるであろう不明なエラー

2023/02/18に公開

React 18.2.0 時点において発生する内容になります。

先人に倣って React でコンポーネントライブラリを作成しようと思いまして、おおよそライブラリ側でのテストを終えた後、実際に別のプロジェクトでそのコンポーネントをローカル参照して動作を確認しようとしたときにそのエラーは起こりました。

Hooks can only be called inside the body of a function component

このエラーメッセージと共にカスタムフック内での null 参照エラーが表示されました。
最初はカスタムフック内での null 参照エラーのほうを疑って調べたのですが、単純なカスタムフックだったので null 参照になる原因が全くわかりませんでした。
そこで上記のエラーのほうをネットで検索したところ、公式ページでの警告を発見し、このエラーのほうこそが問題の原因を示すものだとわかりました。

この問題の原因は上記ページのよくある理由３で示されている「重複した React のコピー」というセクションで説明されているものになります。しかしながら、このページ内には具体的にどうすればこの問題を回避できるかの方法が示されていません。回避方法は文中の「この issue」でリンクされているページのほうで確認できます。

Issue のコメントでいくつかの回避方法が共有されています。私の場合はライブラリを利用する側の Webpack に次の設定を追加することでエラーが起こらなくなりました。なお、同時に起こっていたカスタムフックの null 参照エラーも直ったのでこの問題によって引き起こされたものだったようです。

alias: {
    react: path.resolve('./node_modules/react')
}

本記事の内容は以上となります。

Discussion