webpack+BabelでReactによるファイルをバンドルするも、記載していたコンポーネントが表示されない

まず最初に

Reactを学習中の初心者でございます。

webpackを使い、Babelによる処理を加えられたJavaScriptファイルを生成し、それを読み込んだHTMLファイルをブラウザで表示させるのですが、「src/index.js」に記載していたコンポーネントが表示されません。

package.jsonとwebpack.config.jsの設定は、ics.media様の最新版で学ぶwebpack 4入門 - Babel 7でES2020環境の構築(React, Vue, Three.js, jQueryのサンプル付き)を参考にし、用意した「src/index.js」の中の記述は、掌田津耶乃『React.js＆Next.js超入門』を参考にアレンジして書いてみたつもりです。

初心者ゆえ上手く言語化できず、申し訳ございません。
まずは準備した設定ファイルやコードをご覧いただきたく存じます。

「react_practice」ディレクトリの中はこのようになっております

package.json

json
1{
2  "name": "react_practice",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "build": "webpack"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "@babel/core": "^7.11.6",
14    "@babel/preset-env": "^7.11.5",
15    "@babel/preset-react": "^7.10.4",
16    "babel-loader": "^8.1.0",
17    "webpack": "^4.44.2",
18    "webpack-cli": "^3.3.12"
19  },
20  "dependencies": {
21    "react": "^16.13.1",
22    "react-dom": "^16.13.1"
23  }
24}

webpack.config.js

JavaScript
1module.exports = {
2  // モード値を production に設定すると最適化された状態で、
3  // development に設定するとソースマップ有効でJSファイルが出力される
4  mode: "production",
5  // メインとなるJavaScriptファイル（エントリーポイント）
6  entry: "./src/index.js",
7  // ファイルの出力設定
8  output: {
9    //  出力ファイルのディレクトリ名
10    path: `${__dirname}/dist`,
11    // 出力ファイル名
12    filename: "main.js",
13  },
14  module:{
15    rules:[
16      {
17        // 拡張子 .js の場合
18        test:/.js$/,
19        use:[
20          {
21            // Babel を利用する
22            loader: "babel-loader",
23            options: {
24              presets: [
25                // プリセットを指定することで、ES2020 を ES5 に変換
26                "@babel/preset-env",
27                // React の JSX を解釈
28                "@babel/react"
29              ],
30            },
31          },
32        ],
33      },
34    ],
35  },
36};

src/index.js

JavaScript
1import React from "react";
2import ReactDOM from "react-dom";
3
4
5let dom = document.querySelector('#root');
6
7const msg1 = {
8  fontSize: "24px",
9  fontWeight: "bold",
10  padding: "16px",
11  backgroundColor: "royalblue",
12  marginBottom: "16px"
13};
14
15const msg2 ={
16  fontSize: "14px",
17  fontWeight: "nomal",
18  padding: "16px",
19  backgroundColor: "orchid"
20};
21
22
23function Welcome(props){
24  return <p style={props.style}>いらっしゃい！{props.name}さん</p>;
25}
26
27function Ara(props){
28  return <p style={props.style}>あら、{props.name}さんも来てたの……？</p>;
29}
30
31let el = (
32  <div>
33    <Welcome style={msg1} name="良彦" />
34    <Ara style={msg2} name="良子" />
35  </div>
36);
37
38ReactDOM.render(el, dom);

index.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>React</title>
6<!--
7  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
8  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
9-->
10  <script src="./dist/main.js"></script>
11
12</head>
13<body>
14  <main>
15    <h1>webpack＋Babel＋Reactの作例</h1>
16    <div id="root">
17      Wait...
18    </div>
19  </main>
20</body>
21</html>

ブラウザのコンソールで表示されたエラー内容

コマンドプロンプトにて表示されたメッセージ

困っています

Reactは初心者であり、「オブジェクト」「クラス」などの新しいJavaScriptの概念はもとより「コンポーネント」「DOM」などの横文字の概念の理解も足りず、説明の仕方が変かもしれませんがご了承ください。

どなたか、先輩エンジニア様方で問題点のおわかりになる方はいらっしゃいますでしょうか？

よろしくお願いいたします。

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

回答1件

ベストアンサー

このエラーは，「div#root が描画される前に document.querySelector('#root') を呼んでしまったから，dom === null になっている」のが原因です．HTML ファイルは上から順に読まれていくので，<script src="dist/main.js"> を div#root よりも後に置く必要があります．具体的には，</body> の直前に書くことが多いです．（詳しくは script タグ位置 等で検索すると分かります．）

また，このエラーとは関係ないですが，ここで議論されている通りファイル名は index.js ではなく index.jsx にするべきです．（それに伴い，webpack.config.js 等の中身も変更します．）JS と JSX は厳密に異なるものなので．

投稿2020/10/02 01:32

Zomathi

総合スコア26

mario_parallel

2020/10/02 02:06

回答ありがとうございます！ div#rootが描画される前、すなわち存在しない、というわけで「対象がDOMではない」というメッセージが遠回しにコンソールに現れたのですね！基礎的なミスが原因であることが恥ずかしくもありますが、「src/index.js」の記載内容やwebpack.config.jsの内容にミスがあったわけではないのが嬉しいです。 index.htmlのscriptタグ位置を変えて読み込むことで、画面にコンポーネントも表示されました。とても嬉しいです。大変感謝しております。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！