Rails×VueでSPA化に取り組んでいる初学者の備忘録です。

エラー詳細

Vueを用いてフラッシュメッセージを表示するため@smartweb/vue-flash-messageを導入。
https://www.npmjs.com/package/@smartweb/vue-flash-message/v/next

npm i @smartweb/vue-flash-message@next

開発環境で問題なく動作したためherokuにデプロイしようとしたところ次のエラーが発生した。

ModuleNotFoundError: Module not found: Error: Can't resolve '@smartweb/vue-flash-message' in '/tmp/build_7d25413c/app/javascript/packs'
           at 
.
.
.
.
.

Field 'browser' doesn't contain a valid alias configuration
           resolve as module
             looking for modules in /tmp/build_7d25413c/app/javascript
               using description file: /tmp/build_7d25413c/package.json (relative path: ./app/javascript)
                 Field 'browser' doesn't contain a valid alias configuration
                 using description file: /tmp/build_7d25413c/package.json (relative path: ./app/javascript/@smartweb/vue-flash-message)
                   no extension
                     Field 'browser' doesn't contain a valid alias configuration
.
.
.
.

                     /tmp/build_7d25413c/app/javascript/@smartweb/vue-flash-message doesn't exist

エラー原因

本番環境上で@smartweb/vue-flash-messageが読み込まれていなかった。

package.json

"dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^5.4.3",
    "@smartweb/vue-flash-message": "^1.0.0-alpha.12",
    "@vue/babel-plugin-jsx": "^1.1.0",
    "@vue/compiler-sfc": "^3.2.19",
    "axios": "^0.22.0",
    "turbolinks": "^5.2.0",
    "vue": "^3.2.19",
    "vue-loader": "^16.8.1",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"
  },

package.jsonを見るとdependencesに記載があるので問題ないと思っていたがyarnでプラグインをインストールする必要があった。

解決

一度, プラグインをアンインストールし、

yarn add @smartweb/vue-flash-message@next

で再インストール。herokuにデプロイしたところ、package.jsonとyarn.lockが混在していると表示が出たので

git rm package-lock.json

でyarn.lockを残すようにしてデプロイを実行。
エラーが解決した。