【EC2】vue.jsでのトランスパイル（npm run prodコマンド）を実行するとエラーが出る

前提・実現したいこと

Laravel+Vue.jsでSNS風Webサービスを作成してEC2にデプロイする段階に挑戦しています。
EC2上でnginx+php+laravel+vue.jsの環境構築を行なっております。

$ npm run prod

JavaScriptのトランスパイルを行った際に以下のエラーが発生しました。
自分の力だけでは解決できないと思い、今回質問させていただきました。

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

ERROR  Failed to compile with 1 errors                                                                                                                                                                                             8:20:40 PM

This relative module was not found:

* ./components/ArticleLike in ./resources/js/app.js
 3 assets

ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve './components/ArticleLike' in '/home/web-user/laravel-my-portforio/src/resources/js'
 @ ./resources/js/app.js 3:0-51 7:17-28
 @ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ production 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/web-user/.npm/_logs/2021-11-17T20_20_40_219Z-debug.log

該当のソースコード

src/resources/js/app.js

JavaScript
1import './bootstrap'
2import Vue from 'vue'
3import ArticleLike from './components/ArticleLike'
4
5const app = new Vue({
6  el: '#app',
7  components: {
8    ArticleLike,
9  }
10})

src/resources/js/components/ArticleLike.Vue

JavaScript
1<template>
2  <div>
3    <button
4      type="button"
5      class="btn m-0 p-1 shadow-none"
6    >
7      <i class="fas fa-heart mr-1"
8        :class="{'red-text':this.isLikedBy, 'animated heartBeat fast':this.gotToLike}"
9        @click="clickLike"
10<template>
11  <div>
12    <button
13      type="button"
14      class="btn m-0 p-1 shadow-none"
15    >
16      <i class="fas fa-heart mr-1"
17        :class="{'red-text':this.isLikedBy, 'animated heartBeat fast':this.gotToLike}"
18        @click="clickLike"
19      />
20    </button>
21    {{ countLikes }}
22  </div>
23</template>
24
25<script>
26    export default {
27        props: {
28            initialIsLikedBy: {
29                type: Boolean,
30                default: false,
31            },
32            initialCountLikes: {
33                type: Number,
34                default: 0,
35            },
36            authorized: {
37                type: Boolean,
38                default: false,
39            },
40            endpoint: {
41                type: String,
42            },
43        },
44        data() {
45            return {
46                isLikedBy: this.initialIsLikedBy,
47                countLikes: this.initialCountLikes,
48                gotToLike: false,
49            }
50        },
51        methods: {
52            clickLike() {
53                if (!this.authorized) {
54                    alert('いいね機能はログイン中のみ使用できます')
55                return
56                }
57
58                this.isLikedBy
59                ? this.unlike()
60                : this.like()
61            },
62            async like() {
63                const response = await axios.put(this.endpoint)
64
65                this.isLikedBy = true
66                this.countLikes = response.data.countLikes
67                this.gotToLike = true
68            },
69            async unlike() {
70                const response = await axios.delete(this.endpoint)
71
72                this.isLikedBy = false
73                this.countLikes = response.data.countLikes
74                this.gotToLike = false
75            },
76        },
77    }
78</script>

src/package.json

@click="clickLike"
{
    "private": true,
    "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.24.0",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.14",
        "vue-template-compiler": "^2.6.14"
    }
}

src/webpack.mix.js

/*
 |--------------------------------------------------------------------------
 | 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')
    .sass('resources/sass/app.scss', 'public/css')
    .version();