【解決済み】LaravelでModule parse failed: Unexpected token (1:0)のエラー解決方法

Laravel8でvue3を使おうとしたら下記のエラーが発生しました。

ERROR in ./resources/js/components/ExampleComponent.vue 1:0

Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

> <template>

|     <div>Hello Vue3</div>

| </template>

webpack compiled with 1 error

このエラーの解決方法を今回は紹介します。

【結論】Laravel Mixのバージョン6から仕様が変わったため

「API for JavaScript Frameworks」に書かれているとおり、Laravel mixのバージョン6から仕様が変わったことが原因のようです。

そのため、vueを使いたいならwebpack.mix.jsに下記のように記述しましょう。

//webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue() //⇦これ
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);


//vueのバージョンが2の場合は下記のように明示的にする
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });

これで一件落着です。

ちなみにreactの場合は、下記のようにします。

mix.js('resources/js/app.js', 'public/js').react();

おしまい。

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。