エラー対処のメモです。

ReferenceError

開発中に突然次のエラーが出て全くSPA画面が出なくなってしまいました。

app.js:1 Uncaught ReferenceError: webpackJsonp is not defined
    at app.js:1

ファッ!?

エラーをググってみると、同様のものがすぐに見つかりました。
私と同じような方は、世界中にいらっしゃるようです。

Uncaught ReferenceError: webpackJsonp is not defined
https://github.com/AngularClass/NG6-starter/issues/88

原因と対処

Laravel Mix(というより、webpack)でJSを固める場合、「アプリケーションの実装」と「Vue.jsやaxiosなどベンダーライブラリ」を分離することができます。

Laravel > Frontend > Compiling Assets (Laravel Mix) > Working With JavaScript
https://laravel.com/docs/5.4/mix#working-with-scripts

分離することのメリットは、それぞれを独立してキャッシュできることです。

webpack.mix.jsextract()を追加し、分離するライブラリを指定します。

mix
  .js('resources/assets/js/app.js', 'public/js')
  .extract([
    'vue',
    'axios'
  ])
  .sass('resources/assets/sass/app.scss', 'public/css');

extract()するとmanifest.jsvendor.jsが追加されますため、HTMLにこれの読み込みを追加します。

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>

ドキュメントにはしっかり「extract()を追加した場合は、エラーを回避するためにHTMLも修正するように」と記述されているのですが、前日extract()を追加したところで力尽きてしまったために思い出すのに時間がかかってしまいました。


今回は ファッ!? と言いたかっただけです。