はじめに
本記事では、Reactアプリでreact-modalを使用した際に発生する「Warning: react-modal: App element is not defined.」という警告を解消する方法を紹介します。このワーニングがなぜ発生するのか、そして正しい対処法について具体的に解説します。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
事象
以下のコードでは、react-modalを使用してモーダルを作成し、ボタンをクリックするとモーダルが表示されます。しかし、実行時に次のワーニングが発生しました。
Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting `ariaHideApp={false}`.
ワーニングは動作に影響を与えませんが、解消しておくことが推奨されます。
原因
このワーニングは、react-modalがアクセシビリティ対応の一環として、モーダル以外のアプリケーション部分を非表示にする要素を指定していない場合に発生します。
react-modalの公式ドキュメントによると、Modal.setAppElementで非表示にするルート要素を指定する必要があります。
解消方法
ワーニングを解消する方法は主に2つあります。
方法1: Modal.setAppElementを使用する（推奨）
以下のようにmain.tsxに記述します。
Modal.setAppElement("#root"); // ルート要素を指定
方法2: ariaHideApp={false}を使用する（非推奨）
一時的に解決するための方法です。
<Modal isOpen={modalisOpen} ariaHideApp={false}>
# 終わりに
react-modalを使用した際の「Warning: react-modal: App element is not defined.」というワーニングは、Modal.setAppElementを適切に設定することで解消できます。この設定はアクセシビリティ対応として重要であり、推奨される方法です。一時的な対応としてariaHideApp={false}を使用する方法もありますが、長期的には推奨されません。
参考
『react-modalからの警告Warning: react-modal: App element is not defined.を解決する』Qiita