Laravel9でLaravel Mixが使えなくなっていた

2022年7月6日水曜日

Laravel

t f B! P L
いつものようにLaravelでプロジェクトを作成して、SassのコンパイルをしようとLaravel Mixのnpm run devを実行したところ、次のような見慣れない表示が・・・


  vite v2.9.13 dev server running at:

  > Local:    https://localhost:3000/
  > Network:  https://192.168.10.4:3000/

  ready in 944ms.


  Laravel v9.19.0

  > APP_URL: http://localhost


npm run devの表示が全く違います。しかもコマンドが終了しない。Laravelのバージョンは9.19.0です。

$ php artisan -V
Laravel Framework 9.19.0

原因

2022年6月29日にLaravelのフロントエンドアセットバンドラがデフォルトでViteに変更されたことが原因のようです。
Vite is now the default frontend asset bundler for Laravel applications
公式サイト: Bundling Assets (Vite)

Laravel-Mixに戻したい

将来的にはViteに移行するとして、当面Laravel Mixを使いたかったので色々調べた結果、Laravel Mix⇔ViteのMigration Guideが見つかりました。
ただ、Migration Guideを参考にプロジェクトに変更を加えてもうまく動作しませんでした。結局、プロジェクトのpackage.jsonをたまたま残っていたLaravel 9.14.1のものに差し替えると、Larael Mixに戻すことができました。 package.json(9.14.1)の内容は次のとおりです。

{
    "private": true,
    "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"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.25",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }
}

package.jsonを差し替えた後、プロジェクトのnode_modulesを削除してnpm installを実行します。その後、npm run devを実行すると、これまで通りLaravel MixでSassのコンパイルを行うことができました。

$npm run dev
> @ dev /home/isono/laravel9
> npm run development


> @ development /home/isono/laravel9
> mix

● Mix █████████████████████████ emitting (98%)
 after emit

● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done
✔ Mix
  Compiled successfully in 28.15s

  Laravel Mix v6.0.49


✔ Compiled Successfully in 27807ms
┌────────────────────┬───────────┐
│                                              File │ Size      │
├────────────────────┼───────────┤
│                                        /js/app.js │ 2.23 MiB  │
│                                    css/common.css │ 690 bytes │
│                                       css/app.css │ 200 KiB   │
│                                    css/custom.css │ 690 bytes │
└────────────────────┴───────────┘


このブログを検索

QooQ