ビルドしたReactアプリが真っ白だったときの対処法【React】

本記事の目次

ビルドしてReactアプリを表示すると真っ白な画面が表示される
真っ白な画面が表示される原因
真っ白な画面が表示された時の対処法
まとめ

ビルドしてReactアプリを表示すると真っ白な画面が表示される

create-react-appで開発したReactアプリを、ビルドしてブラウザで表示しようとすると、画面が真っ白になって何も表示されないことがありました。

ビルドしたReactアプリは、HTMLやCSS、JavaScriptなどから構成されるもので、ブラウザにドラッグ＆ドロップするだけで表示されるものと考えておりました。

真っ白な画面が表示される原因

Chromeの開発ツールで確認してみることに。

HTMLファイルは正しく表示されており、CSSやJavaScriptが動いていない模様。

CSSとJavaScriptを読み込んでいる箇所を確認してみると

<head>
  ~ 省略 ~
  <!-- JavaScriptの読み込み箇所 -->
  <script defer="defer" src="/static/js/sample.js"></script>
  <!-- CSSの読み込み箇所 -->
  <link href="/static/css/sample.css" rel="stylesheet">
  ~ 省略 ~
</head>

ルートパスで読み込んでいるようでした。

ビルドしたReactアプリはパソコンのルートディレクトリに配置しているわけではないため、ReactアプリのJavaScript（CSS）が読み込まれず、画面が真っ白に表示されていたわけです。

真っ白な画面が表示された時の対処法

JavaScriptやCSSの読み込み先のパスの問題であるため、Reactアプリのパスを変更して対処しましょう。

構築したReactアプリのpackage.jsonを編集します。

{
  "name": "test", // 作成したアプリ名
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  ~ 以下省略 ~

“homepage”の設定を追加します。

{
  "name": "test", // 作成したアプリ名
  "version": "0.1.0",
  "private": true,
  "homepage": "./" // homepageの設定を追加
  "dependencies": {
  ~ 以下省略 ~

“homepage”の設定を追加したら、編集内容を保存して再度Reactアプリのビルドを行います。

ビルドしたReactアプリをブラウザにドラッグ＆ドロップすると、正しく表示されるようになっているはずです。

CSSとJavaScriptを読み込んでいる箇所を確認してみると

<head>
  ~ 省略 ~
  <!-- JavaScriptの読み込み箇所 -->
  <script defer="defer" src="./static/js/sample.js"></script>
  <!-- CSSの読み込み箇所 -->
  <link href="./static/css/sample.css" rel="stylesheet">
  ~ 省略 ~
</head>

package.jsonで設定した”homepage”の値でパスが設定されていることを確認できます。