More than 3 years have passed since last update.

[React] 本番環境でのみ画面が真っ白になる場合

Last updated at 2021-05-19Posted at 2020-07-05

概要

開発環境だと問題なく動作するのに、本番環境だと画面が真っ白になる現象が発生。

開発環境で発生していたWarningを全て解決してもダメ。

解決に1時間以上かかったのに、結果として大したことない理由だったので、共有したいと思いました...。

作成したページにアクセスすると画面が真っ白....。

たまたま、ブラウザの開発者コンソールを確認したら、javascriptのエラーが出ていた！

内容は Minified React error #152; ！

react の return メソッドの中で、javascript のコメント記法である // を使用していると、難読化の過程でソースが壊れてしまうことが判明。

Hoge.js

// 例

return() {
  // returnの中でこのコメントの書き方をしているとエラーになる
}

ここに書いてある通りで、

return メソッドの引数内の、 // によって生成しているコメントを削除すると解決する。

わかりやすいのはここか

React初心者向けの本に書いてあると良さそうと感じました。

特に、元々 return 内に書いていなかったけれども、ソースの移動とかをしているうちに return メソッド内に紛れ込んでしまう、ということは普通にありそう。

この書き方 /* コメント */ だとエラー発生しないという記載もあるので、全部こっちの書き方に移行すればいいかもしれない。