Reactを学習し始めて、基本的なことは大体身についたからいよいよ独自で考えたアプリを作ってみよう・・・ と取り掛かった際に遭遇しやすいのがこのエラーです。 今回は「Target Container is not a DOM element」エラーの対処法についてご紹介します。
reactを使用していることだいたい以下のようなエラーが出るかと思います。
Error: Target container is not a DOM element.ざっくりとした解説ですが、renderなり何なりの描画処理を行う場合は必ず実際のHTML要素であるDOM Elementを参照して行います。
その起点となるDOM Elementが見つからない or DOM Elementでない要素を指定していることが原因です。
ただ、実際には呼び出している関数の中で最終的にこのエラーが出ているだけの場合が多く、自身がコーディングしているソースが原因でこのエラーが発生することは稀です。
rootより後に<script>を書くindex.htmlから自分の手でゴリゴリ書いている場合はこの対応方法で直る可能性があります。
index.js内でReactDOM.render()を行いますが、その対象となるタグ(だいたいはid="root"のタグ)より後に<script src="./bundle.js"></script>の記載をしましょう。
<Provider>をdivタグで囲うreact-reduxの<Provider>を使っている場合はこれで直る可能性があります。
<Provider>を<div>で囲うようにしましょう。
<div>
<Provider store={store}>
{/* ...略... */}
</Provider>
</div>今回は、初学者がよく遭遇するであろうTarget container is not a DOM elementの対応方法についてご紹介しました。
このエラーに遭遇する段階では、まだエラー処理の知見もなく、原因不明のまま悶々とするというケースが多いので、そういった方の参考になれば幸いです。