vue.jsでのトランスパイル（npm run watch-pollコマンド）を成功させたいです。

Question

vue.jsでのトランスパイルを行うためにnpm run watch-pollコマンドを実行すると、エラーが発生します。

PHP(laravel)でアプリを作っています。
そこにvue.jsをインストールし、トランスパイルするためにnpm run watch-pollコマンドを実行したところ、以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

> @ watch-poll /Users/tkm_mkzk/PHP/postfit/backend
> mix watch -- --watch-options-poll=1000
✖ Mix
  Compiled with some errors in 2.03s
ERROR in ./resources/js/app.js 3:0-45
Module not found: Error: Can't resolve './components/BlogLike' in '/Users/tkm_mkzk/PHP/postfit/backend/resources/js'
webpack compiled with 1 error

該当のソースコード

postfit/backend/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": {
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.13",
        "lodash": "^4.17.21",
        "popper.js": "^1.12",
        "postcss": "^8.2.8",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^8.0.0",
        "vue": "^2.6.11",
        "vue-template-compiler": "^2.6.11"
    }
}

postfit/backend/resources/js/app.js

import './bootstrap'
import Vue from 'vue'
import BlogLike from './components/BlogLike'
const app = new Vue({
  el: '#app',
  components: {
    BlogLike,
  }
})

postfit/backend/resources/js/components/BlogLike.vue

<template>
  <div>
    <button
      type="button"
      class="btn m-0 p-1 shadow-none"
    >
      <i class="fas fa-heart mr-1"
      />
    </button>
    10
  </div>
</template>
<script>
</script>

backend/webpack.mix.js

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
    .version()
    .sourceMaps();

試したこと

node_modulesを削除する

rm -rf ../laravel/node_modules

package-lock.jsonを削除する

rm -rf ../laravel/package-lock.json

npm installを実行する

npm install

npm run devを実行する

npm run dev

これらのコマンドを試して見ましたが
同じエラーのままです。
宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

php 7.4.14
Laravel Framework 8.28.1

Answer 1

laravel-mix6ならvue()も必要。

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .version()

さらにVue2ならバージョンの指定も必要。

mix.js('resources/js/app.js', 'public/js')
   .vue({ version: 2 })
   .version()

https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md

Comments

[tkm-mkzk]

回答ありがとうございます。
こちら記述したところ問題なく動きました。
また機会がありましたら宜しくお願い致します。