LoginSignup
0
0

More than 1 year has passed since last update.

@motti_engineer(Nobusada Okamoto)

laravel6でlaravel-mix6にupgradeしたらエラーが続出した（vueもエラー）

Last updated at Posted at 2021-09-27

きっかけ

laravel6でlaravel-mixを6にupgradeしたら、いろいろとエラーが発生しました。
そのうえ、vueも正しく表示されなくなったので、備忘録も含め解決方法を投稿しておきます。

環境

  • windows10
  • wsl2
  • laravel：6.20.34
  • php：7.4.3
  • composer：2.1.8
  • laravel-mix：6.0.31
  • node：14.15.4
  • npm：6.14.10

まずはvueが正常に使えるのを確認

laravel6にlaravel/uiをインストール
※laravel6公式サイトより

composer require laravel/ui "^1.0" --dev


php artisan ui vue

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

// 認証機能も使いたい場合は末尾に--authをつける（下記参照）
// php artisan ui vue --auth

package.jsonにてlaravel-mixのバージョンをチェック
現状は5系になっていることを確認

{
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1", // 現状は5系になっている
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

welcome.blade.phpに下記を追記してvueのcomponentを使えるかチェック

// (省略)
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

// (省略)
<div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

/* ここを追記 */
                <div id="app">　
                    <example-component></example-component>
                </div>
/* ここまで */
                <div class="links">
// (省略)

// (省略)
    <script src="{{ mix('js/app.js') }}"></script>
</body>

npmを実行

npm i && npm run dev

laravel標準のローカル開発サーバを起動してチェック

php artisan serve

Laravel development server started: http://127.0.0.1:8000

http://127.0.0.1:8000 へアクセス
vueのcomponentが正しく表示されていることを確認

vue-component.png

問題はここから！！！

laravel-mixを6へupgrade

理由は忘れたけど、laravel-mixを最新版へアップグレードすることになり下記を実行

npm i laravel-mix@latest

環境構築しようとnpm run devしたところ、エラー続出！！

npm run dev

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 class="container">
|         <div class="row justify-content-center">

webpack compiled with 1 error
Notifications are disabled
Reason: DisabledForApplication Please make sure that the app id is set correctly.
Command Line: snoretoast-x64.exe -appID "Laravel Mix" -pipeName /tmp/notifierPipe-5eb8fb43-5fb4-4b91-ab87-d555b09526ef -p /mnt/c/Users/npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nobusada/.npm/_logs/2021-09-27T02_18_38_749Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因

調査したところ、laravel-mixの6系ではpackage.jsonやwebpack.mix.jsの書き方が変わった模様。
公式サイトの手順に沿って記述を変更

まずはpackage.jsonを変更

変更前

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

変更後

"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"
}

続いてwebpack.mix.jsを変更

※下記の箇所のみ変更

変更前

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

変更後

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').vue();

再度、npmの実行

npm i && npm run dev

すると、下記が表示される

Finished. Please run Mix again.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nobusada/.npm/_logs/2021-09-27T02_30_16_184Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

ちょっと焦るが、Please run Mix again とあるので、もう一度npmを実行

npm run dev
webpack compiled successfully

無事にnpmは実行された。

ここでもう一つ問題発生！！

vueのcomponentが表示されない。
laravelのローカル開発サーバを起動してwelcome.blade.phpのページを表示してもcomponentが表示されていない。。。

vue-component_2.png

chromeのデベロッパーツールでconsole（コンソール）を確認してみると下記の表示あり

Uncaught TypeError: Vue.component is not a function

これもいろいろと調査してみたところ、resouces/js/app.js で下記の箇所を変更する必要があるとのこと。

変更前

window.Vue = require('vue');

変更後

window.Vue = require('vue').default;

再度、npm実行・ローカル開発サーバを起動してチェック

// npm実行
npm run dev

// ローカル開発サーバ起動
php artisan serve

http://127.0.0.1:8000 へアクセス

vueのcomponentが正しく表示されていることを確認。解決！

vue-component_3.png

そもそもlaravel6でlaravel-mix6を使うのが間違いなのかもしれない。。。
※laravel6ではデフォルトでlaravel-mixの5系がインストールされているので

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0