行いたいこと

ブラウザのコンソールに出てる以下の文章を本番環境で消したかった。
Download the React DevTools for a better development experience: https://fb.me/react-devtools

やったこと

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
<!-- 略 -->
  </head>
  <body>
    <script>
      // 本番環境上でコンソール上のdevtoolに関するメッセージを本番環境では表示しないようにする。
      @production
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
          supportsFiber: true,
          inject: function() {},
          onCommitFiberRoot: function() {},
          onCommitFiberUnmount: function() {},
        };
      @endproduction
    </script>
    <div id="app"></div>
  </body>
</html>

解説

グローバル変数に以下の内容を代入すれば、devtoolに関するメッセージは消える
※ただしバンドルされるコード内に記載しても意味がない。

  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
          supportsFiber: true,
          inject: function() {},
          onCommitFiberRoot: function() {},
          onCommitFiberUnmount: function() {},
        };

補足（Laravel）

投稿主の環境はPHP(Laravel) + React.jsの構成になっている。
ちょうどいいからLaravelのBlade(テンプレートエンジン)上で、本番環境では、出ないようにするために、
@production と @endproductionで挟んでいる。

@productionの解説
https://readouble.com/laravel/7.x/ja/blade.html#if-statements

React Developer Toolsのインストールを推されるコンソールメッセージ消してみた。

行いたいこと

やったこと

解説

補足（Laravel）