【React】本番環境にデプロイして画面が真っ白になった時の解決方法

初めまして！
外語大生フロントエンドエンジニアのジャックです。
今まで記事を閲覧することしかしていませんでしたが、この度、Qiitaを初投稿することにしました！

初投稿ですのでお見苦しい文章かもしれませんが、暖かく見ていただけると嬉しいです。
よろしくお願いします

前書き

ReactでSPAを初めて作り、デプロイした時に画面が真っ白になって数時間ハマってしまいました。
これから書く解決方法は中々見つけることができなかったのでReact初心者の人が同じ現象に遭遇した時に参考にしていただけると幸いです。

現象

npm startでローカル環境では正常に描画されてるけど、npm run buildして本番環境にアップすると画面が真っ白になってしまう。

解決方法その1

package.jsonを開き、"homepage": "./",を追加するだけ。

{
  "name": "helpmeeeal",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",

どうやらビルド後のパスが合ってなかったみたい。。

解決方法その2

だいたい解決方法その1のやり方で真っ白になってしまう問題は解決できるっぽいのですが、僕はこれだけでは正常にデプロイすることができなかった。。
調べても解決方法その1のやり方ばかり出てくると思います。
僕と同じようにまだ解決できない方は以下の方法を試してください！

こちらのコードを

import { useState } from "react/cjs/react.development";

こちらに変換

import { useState } from "react";

これをやっただけで真っ白問題は解決できました。

原因

どうやらvs codeの自動補完機能でuseStateを補完したのが原因でした。
useStateだけでなくuseEffectやRecoilなど、他のimport文も一度確認してみるといいかもです。

最後に

最後まで読んでいただきありがとうございました。
Reactを勉強し始めた方や駆け出しエンジニアの方はなんで真っ白になったかわかんないですよね。。笑
僕もまだまだ勉強中なのでよければTwitterつながりましょー！
フォローしていただけると嬉しいです