time 2017/10/17
読むのが面倒な人向けまとめ
- webpack.mix.jsの「modules」で「vue-loader」を指定しているなら削除する。
ここから本文
最近のフロントエンドの開発には欠かせないモジュールバンドラー。
「使いたいけど、色々種類もあるし、色々設定必要だし使うの大変そう。。。」って人もいるかと思います。
そんな時に便利なのが、Laravelの「Laravel Mix」。
前までは「Laravel Elixir」って呼ばれていたやつです。
単純に使うなら3行ほどの設定で使えるようになります。
今回はLaravel Mixの使い方ではなくて、Vue.jsのSFC(単一ファイルコンポーネント)がLaravel Mixだとエラーになる事がある現象についてです。
Webpack使っていた人がVue.jsの公式サイトなどを見てLaravel Mixの設定をした場合にハマるかも？
Laravel MixはWebpackの拡張なので、Webpack同様ローダーを通したりするのですが、Vue.js用の「vue-loader」を指定しちゃうと「Failed to mount component: template or render function not defined. 」ってVueに怒られます。
LaravelがVue.jsを公式サポートしていることもあってか、Laravel Mixはデフォルトで「vue-loader」を読み込んでいます。
そのせいで、自分で「vue-loader」を指定しちゃうとエラーになります。
ちゃんと設定書いたらエラーになるのはちょっと悔しい気もしますが「そもそもLarave MixはLarave MixであってWebpackじゃない！」って事で、設定消してしまいましょう。
参考URL https://github.com/JeffreyWay/laravel-mix/issues/1394
