Udemyの講座 と Laravel9 スターターキットを参考にLaravel9+Vue+Laravel Breezeの環境を作ったのですが、今までViteで起動していたのにMixに切り替わってしまった上になんかエラーも吐くという訳の分からない状態で軽くパニックになったので、MixからViteに戻す方法をここに残します…
実行したコマンドとエラー
Laravel9 スターターキットのコマンドを順番に実行しました。
composer require laravel/breeze --dev
php artisan breeze:install
php artisan migrate
npm install
npm run dev
npm run devまで打ち込んだのはいいんですが、今まではViteで起動していたのにMixが立ち上がろうとし、こんなエラーが…
C:\xampp\laravel-vue\uCRM> npm run dev
> dev
> npm run development
> development
> mix
✖ Mix
Compiled with some errors in 1.82s
WARNING in ./resources/js/app.js 15:65-76
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)
ERROR in ./resources/js/app.js 7:0-75
Module not found: Error: Can't resolve 'laravel-vite-plugin/inertia-helpers' in 'C:\xampp\laravel-vue\uCRM\resources\js'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json"]'?
webpack compiled with 1 error and 1 warning
PS C:\xampp\laravel-vue\uCRM> npm run dev
「なんかわけわからないエラーが出てる…なぜかMixで起動される…」と
環境設定でエラーが出ると泣いてしまう私には、今回こちらの記事が非常に役に立ちました。↓
https://stackoverflow.com/questions/72995605/module-not-found-error-cant-resolve-laravel-vite-plugin-inertia-helpers
対処法：package.jsonの修正
Viteではなく、Mixが起動されてしまう。そんな時はまず「package.json」をチェックしましょう。
私の該当ファイルは以下の通りでした。
{
"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": {
"@inertiajs/vue3": "^1.0.0",
"@tailwindcss/forms": "^0.5.3",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/server-renderer": "^3.2.31",
"autoprefixer": "^10.4.12",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"vue": "^3.2.41"
}
}
記事を参考に読み進めると、どうやらScriptの記述で「Mix」を指定していることが問題のようです。
なので、Scriptを下記のように修正しました。（Viteはこの2行がデフォルトのようです。）
"scripts": {
"dev": "vite",
"build": "vite build"
},
これで再度npm run devを行っても下記のように「laravel-vite-plugin」がないと怒られるので、
failed to load config from C:\xampp\laravel-vue\uCRM\vite.config.js
error when starting dev server:
Error: Cannot find module 'laravel-vite-plugin'
Require stack:
- C:\xampp\laravel-vue\uCRM\vite.config.js
- C:\xampp\laravel-vue\uCRM\node_modules\vite\dist\node\chunks\dep-2b82a1ce.js
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (C:\xampp\laravel-vue\uCRM\vite.config.js:36:42)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at _require.extensions.<computed> [as .js] (file:///C:/xampp/laravel-vue/uCRM/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:66327:24)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19)
「laravel-vite-plugin」インストールコマンドを打ち込みます。
npm install --save-dev vite laravel-vite-plugin
これで再度npm run devを行えば！
npm run dev
> dev
> vite
VITE v4.4.11 ready in 503 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
LARAVEL v9.52.15 plugin v0.8.1
➜ APP_URL: http://localhost
成功しました！
ここで2時間くらい詰まっていたので成功して本当に良かった～！
まとめ
Viteが起動しないときはpackage.jsonがおかしくないか確認しよう
以上、MixからViteに戻す方法でした。