Vue.jsのエラー「Webpacker::Manifest::MissingEntryError」について

前提・実現したいこと

以下のページを参考にRails×Vue.jsの環境構築を行っていますが、標題のエラーが解決できません。

https://www.petitmonte.com/ruby/rails-vuejs-project.html

調べてみた限りでは、public/packs/js配下のファイル設定の問題か、Webpackerとその他パッケージの
バージョン互換の問題のような気がしていますが、解決の糸口がつかめていません。

プログラミング実務未経験かつWebpackerは触り始めて3日目程度なので、
前提の知識が抜けているだけかもしれませんが、ご回答いただけますと幸いです。

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

Webpacker::Manifest::MissingEntryError

※ルートページに設定したCat#indexのページです。

Showing /home/ec2-user/environment/app/app/views/layouts/application.html.erb where line #10 raised:

Webpacker can't find hello_vue in /home/ec2-user/environment/app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-0ece40a053943826c961.js",
  "application.js.map": "/packs/js/application-0ece40a053943826c961.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-0ece40a053943826c961.js"
      ],
      "js.map": [
        "/packs/js/application-0ece40a053943826c961.js.map"
      ]
    }
  }
}

Extracted source (around line #10):
8    <%= stylesheet_link_tag 'application', media: 'all' %>
9    <%= javascript_pack_tag 'application' %>
10   <%= javascript_pack_tag 'hello_vue' %>
11  </head>
12
13  <body>

該当のソースコード

上で指定した以下URLのソースコードのままです。
https://www.petitmonte.com/ruby/rails-vuejs-project.html

試したこと

エラー文をGoogle検索の上、以下を実施

https://qiita.com/Tarako_mochi/items/b983d530234a984eb61e
gem 'webpacker', '~~> 4.0'をgem 'webpacker', '~~> 5.0'に変更し、

$ bundle install
$ rails webpacker:install
$ rails webpacker:install:vue
$ rails server

→解決せず。
ちなみに、記事で書かれているpublicフォルダ以下のpacksフォルダとmanifest.jsonファイルは作成されていました。

https://qiita.com/kazumawada/items/f7c3cafcf01ed9757a78
この記事と違い、コンテナ化はしていませんが、yarn install と yarn upgradeを実施
→解決せず。

https://qiita.com/shizen-shin/items/38fd774ffc87bc8838c9
・config/webpacker.ymlのcompile設定確認→trueになっている
・webpackが再起動されていないためか→rails newでwebpackをインストールしたばかり
・webpacker.ymlの設定をいじっているか→変更していない
・webpackの環境設定がmanifestを生成してないか→manifest.jsonは存在(ただし、application.jsの記載のみでhello_vueの記載はない)
また、public/packs/js配下にはapplication.js関連のファイルは生成されているが、hello_vue.js関連のファイルはない。

上記に関連して、以下から10 <%= javascript_pack_tag 'hello_vue' %>を削除するとエラーは消えます。

Extracted source (around line #10):
8    <%= stylesheet_link_tag 'application', media: 'all' %>
9    <%= javascript_pack_tag 'application' %>
10   <%= javascript_pack_tag 'hello_vue' %>
11  </head>
12
13  <body>

javascript_pack_tag 'application'は読み込めており、hello_vueが読み込めていないようです。
public/packs/js配下にhello_vue関連のファイルがあればエラーは消えるでしょうか？
その場合、hello_vue関連のファイルは自動生成されるものではないのでしょうか？

Webpackのビルドも失敗

Webpacker::Manifest::MissingEntryError

$ bin/webpack
/home/ec2-user/environment/app/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/home/ec2-user/environment/app/node_modules/vue-loader/dist/index.js:8:11)
    at Module._compile (/home/ec2-user/environment/app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (/home/ec2-user/environment/app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/ec2-user/environment/app/config/webpack/environment.js:2:29)
    at Module._compile (/home/ec2-user/environment/app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (/home/ec2-user/environment/app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/ec2-user/environment/app/config/webpack/development.js:3:21)
    at Module._compile (/home/ec2-user/environment/app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (/home/ec2-user/environment/app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/home/ec2-user/environment/app/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/home/ec2-user/environment/app/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /home/ec2-user/environment/app/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/ec2-user/environment/app/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at yargs.parse (/home/ec2-user/environment/app/node_modules/webpack-cli/bin/cli.js:71:45)