【Vue.js+Rails】herokuデプロイ時の「 Cannot find module '@vue/babel-plugin-jsx'」の対処

RailsにVue.js3を導入してjsxファイルを書いてherokuにデプロイしようとしたところ掲題のエラーが発生し対処に時間がかかったため、その備忘録です。
（railsとvue.jsを使ってPFを制作中の初学者ですので内容に不備があればコメントで指摘頂けると幸いです。）

エラー発生の経緯

Vue.jsでjsxを使用するため公式ドキュメントにならって下記コマンドを入力。
https://github.com/vuejs/jsx-next

npm install @vue/babel-plugin-jsx -D

ローカル環境では問題なくjsxファイルが読み込まれたのでherokuにデプロイしようとした所

 ERROR in ./app/javascript/packs/application.js
       Module build failed (from ./node_modules/babel-loader/lib/index.js):
       Error: Cannot find module '@vue/babel-plugin-jsx'

というエラーが発生。エラー表示をコピペしてググっても解決法が分からずに途方に暮れていました。

原因特定の過程

ローカル環境ではjsxファイルが表示されていたということは開発環境ではbabel pluginは読み込まれていたことになる。
↓
本番環境だけ読み込まれない設定になっている？
↓
npmでインストールした中身はpackage.jsonに表示されることを知る。
↓
package.jsonファイルを確認。

package.json

 "dependencies": {
    .
    .
    .
    .
    "@vue/compiler-sfc": "^3.2.19",
    "turbolinks": "^5.2.0",
    "vue": "^3.2.19",
    "vue-loader": "^16.8.1"
  },

  "devDependencies": {
    .
    .
    .
    .
    "@vue/babel-plugin-jsx": "^1.1.0",
  },

ざっくり上記のような内容。

↓
"devDependencies"は開発環境のみで必要なプラグインが保存されているので本番環境で読み込むためには"dependencies"の中にインストールする必要がありそう。
↓
一度アンインストール

npm uninstall @vue/babel-plugin-jsx 

↓

再度"--save"を付けてdependencies内に読み込まれるようにコマンド実施。

npm install --save @vue/babel-plugin-jsx 

↓
dependenciesに追加され、devDependenciesからは削除されていることを確認。

package.json

 "dependencies": {
    .
    .
    .
    .
    "@vue/compiler-sfc": "^3.2.19",
    "turbolinks": "^5.2.0",
    "vue": "^3.2.19",
    "vue-loader": "^16.8.1",
    "@vue/babel-plugin-jsx": "^1.1.0" 
  },

  "devDependencies": {
    .
    .
    .
    .
  　　　,
  },

結果

herokuにデプロイできた。