React.jsの箇所だけ表示されません

発生している問題

React.jsを含んだページをウェブ上にアップしたところ、以下のようなエラーが発生しました。

上段のエラーUncaught Error: Minified React error #200ですが、リンク先にてTarget container is not a DOM element.と表示があったため、おそらくDOMエレメントに問題があるのだと思ってます。また下段のindex.jsに対するシンタックスエラーですが、こちらもちょうどReactDom.renderしている箇所と被ります。

本題

本題なのですが、このwebpackで一まとめにする際の元となるindex.jsを下記に記載します。

index.js

javaScript
1import React from 'react';
2import ReactDOM from 'react-dom';
3// import -- CSS
4import './css/reset.css';
5import './css/style.css';
6import './css/hello.css';
7import './css/clickbutton.css';
8import './css/countup.css';
9// import -- Components
10import Hello from './components/hello';
11import Clickbutton from './components/clickbutton';
12import Countup from './components/countup';
13
14// React Define constant
15const helloReact = document.querySelector('#hello');
16const clickEvent = document.querySelector('#clickbutton');
17const countup = document.querySelector('#countup');
18
19// React DOM.render
20ReactDOM.render(<Hello/>, helloReact);　// ちょうど20行目はこの辺りです！
21ReactDOM.render(<Clickbutton/>, clickEvent);
22ReactDOM.render(<Countup/>, countup);

エラーとなっている20行目の辺りにコメントを入れています。
ReactDom.renderの箇所だとは思うのですが、<Hello />もしくはconst helloReactを見つけることができないのでしょうか。
（以前にも同じような質問をしたため、そのような気がするのですが...解決法が分かりません）

一応、index.htmlの方も記載しておきます。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React test</title>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
9    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
10    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11    <script src="../src/bundle.js"></script>
12</head>
13<body>
14
15<div id="hello"></div>
16
17// 中略
18
19<div id="clickbutton"></div>
20
21// 中略
22
23<div id="countup"></div>
24    
25</body>
26</html>

長いので中略していますが、index.htmlはこのように記述しています。

これら質問の概要について

以上となります。

皆様、お手数をおかけしますがご回答して頂けるとこちらとしては大変助かります。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

<script src="../src/bundle.js"></script>が<head>の中にありますが、これを読んだ段階では<body>以下は生成されておらず、const helloReact = document.querySelector('#hello');は空振りになります。