RailsアプリでReactが立ち上がらない。

お世話になっております。
**「現場で使える ruby on rails 5速習実践ガイド」**で学習を進めておりまして、**Chapter8-5 taskleafにReactを導入してみる(P349~)**のところでエラーが出て解決策が見つからなかったので質問です。

ruby 2.5.1
Rails 5.2.1
webpacker '3.5.5'(gem 'webpacker'で導入)

↑最初、webpacker 5.3.0で入れていたのですが、書籍に合わせて上記に変更しbin/rails webpacker:installをし直しました。

bin/yarn add react react-dom
↓

yarn
1react-dom@^17.0.2:
2  version "17.0.2"
3  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
4  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
5  dependencies:
6    loose-envify "^1.1.0"
7    object-assign "^4.1.1"
8    scheduler "^0.20.2"
9
10react@^17.0.2:
11  version "17.0.2"
12  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
13  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
14  dependencies:
15    loose-envify "^1.1.0"
16    object-assign "^4.1.1"
17

app/javascript/taskleaf/hello.js

javascript
1import React from 'react';
2import ReactDOM from 'react-dom';
3
4document.addEventListener('DOMContentLoaded', () => {
5  ReactDOM.render(
6    React.createElement('div', null, 'Hello World!'),
7    document.body.appendChild(document,createElement('div'))
8  );
9});

app/javascript/packs/application.js

javascript
1import 'taskleaf/hello';
2
3console.log('Hello World from Webpacker')

app/views/layouts/application.html.slim

ruby
1= javascript_pack_tag 'application'

上記設定をしてrails s

「Hello World!」と書かれた要素がブラウザ上に出現するはずなのですが、ReactDOMの箇所がエラーになります。

【試したこと】

bin/yarn install

taskleaf % bin/yarn install
yarn install v1.22.10
[1/4] ????  Resolving packages...
success Already up-to-date.
✨  Done in 0.49s.

↓
bin/webpack

taskleaf % bin/webpack             
Hash: 6f40949d816007a5ed89
Version: webpack 3.12.0
Time: 652ms
                                  Asset       Size  Chunks                    Chunk Names
    application-4898c60e8c9cb30d63ed.js       1 MB       0  [emitted]  [big]  application
application-4898c60e8c9cb30d63ed.js.map    1.18 MB       0  [emitted]         application
                          manifest.json  142 bytes          [emitted]         
   [2] ./app/javascript/packs/application.js 541 bytes {0} [built]
   [3] ./app/javascript/taskleaf/hello.js 253 bytes {0} [built]
    + 9 hidden modules

書籍には記載がなかったのですが、

./bin/webpack-dev-serverを実行しrails sも試したのですが結果同じでした。

taskleaf % ./bin/webpack-dev-server
(node:3452) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
Project is running at http://localhost:3035/
webpack output is served from /packs/
Content not from webpack is served from /Users/●●●/Documents/taskleaf/public/packs
404s will fallback to /index.html
Hash: 6d603f22a89b922ac7d4
Version: webpack 3.12.0
Time: 953ms
                                  Asset       Size  Chunks                    Chunk Names
    application-00d93b8d997a9ea915c5.js    1.34 MB       0  [emitted]  [big]  application
application-00d93b8d997a9ea915c5.js.map    1.57 MB       0  [emitted]         application
                          manifest.json  142 bytes          [emitted]         
   [2] ./node_modules/react/index.js 190 bytes {0} [built]
   [4] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {0} [built]
   [5] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} [built]
   [6] ./node_modules/url/url.js 23.3 kB {0} [built]
   [7] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
   [9] ./node_modules/url/util.js 314 bytes {0} [built]
  [10] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [13] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [15] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
  [16] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
  [18] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
  [24] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
  [26] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [28] ./app/javascript/packs/application.js 541 bytes {0} [built]
  [29] ./app/javascript/taskleaf/hello.js 253 bytes {0} [built]
    + 22 hidden modules
webpack: Compiled successfully.

(node:3452) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.というところが気になったのですが、そもそも、このバージョンでは非推奨だったりするのでしょうか。

ご教示の程、宜しくお願い致します。