Udemyでお問い合わせいただく中で、

『Vite』と『Laravel-mix』が混在してしまう件で困っている方からちょくちょく連絡がきますので、

改めて記事にまとめてみることにしました。

ViteとLaravel-mixが混在してしまう原因

インストールする『Laravel』のバージョンが、

9.28 以降ならデフォルトで『Vite』の設定、

9.28より前のものなら『Laravel-mix』が設定されます。

(5.3より古かったらElxier というものもありましたが今回は割愛します。)

問題は、

『Laravel』で認証機能を使うために『Laravel-Breeze』をインストール際、

最新版をインストールすると自動的に『Vite』対応になるというところです。

LaravelにVite対応、Laravel-BreezeもVite対応なら問題ないけれど、

LaravelにLaravel-mixで、Laravel-BreezeがVite対応なら、コードが足りなくてエラーが出るという流れになります。

確認したいファイル

確認したいファイルは3つあります。

『composer.json』『package.json』『resources/viewsのheadタグ』

まずcomposer.jsonでLaravelのバージョンを確認します。

こんな感じに表示されます。

"require": {
        "php": "^7.3|^8.0",
        "laravel/framework": "^8.12",

次に『package.json』を確認します。

Laravel-mixが設定されているとこんな表示になります。

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"

対してViteの場合はdevとbuild 2つしかありません。(devでwatchも兼ね備える)

"scripts": {
        "dev": "vite",
        "build": "vite build"
    },

もう一つ、cssやjsをhtmlで読み込むために、HTMLファイルに追加する必要があって、

headタグを含むファイルを見ます。

resources/views/app.blade.php もしくは resrouces/views/layouts/app.blade.php あたりになります。

Laravel-mixの場合は、バージョンにもよりますが、assetかmixで読み込んでいます。

<!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

Viteの場合は@viteで読み込みます。

@vite('resources/js/app.js')

Laravel-Breezeが新しいとここが@vite になるようです。

対処法

基本的にpackage.jsonに書かれている方に合わせる方が楽ですので、

Laravel側がLaravel-mix、BreezeがViteの場合は、

package.jsonを見て、laravel-mixか、Viteかを確認し、

resources/views/app.blade.php の読み込み部分をそれぞれに書き換えて、

npm run devと実行してエラーなく表示されればOKです。

もしBreeze -> Laravel-Mix に変更したい場合は、ちょっと大変ですが対応動画も収録していますのでご確認ください。