Laravel MixでVue.jsのSFC(.vue)なファイルが「template or render function not defined」って言われた場合


読むのが面倒な人向けまとめ
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