前書き

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

現象

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

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

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

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

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

こちらのコードを

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

こちらに変換

import { useState } from "react";

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

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

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