Reactでnpm run buildした際に何も表示されない時の対処法

事象

• npm run buildして、生成されたbuildディレクトリのindex.htmlを開いても真っ白で何も表示されない。
• 開発者ツールを確認しても特にエラーは表示されていない。

対策

• デフォルトで表示するコンポーネントを指定する
• ビルド後のファイルからjsを参照できるようにする

デフォルトコンポーネントの指定

Routerの中にpathを指定しないコンポーネントを追加する。

これでデフォルトで表示するコンポーネントを設定できます。

App.tsx

<Router>
  <div>
    <Route component={Home}/>
  </div>
</Router>

ビルド後のファイルからjsを参照できるようにする

やることはpackage.jsonに"homepage": "./",を追加するだけです。

package.json

{
   "name": "react-material-ui-sample",
   "version": "0.1.0",
   "private": true,
   "homepage": "./",

参考リンク

• https://qiita.com/stakezaki/items/2beceb3cc8b5dd696a8f
• https://github.com/facebook/create-react-app/issues/165#issuecomment-235801531