Nuxt.jsのアップデートでエラーが起こりアップデートできない問題

2022年3月2日水曜日

技術系

Vue packages version mismatch:エラー

npm コマンドを使って nuxt.js 一式をマイナーアップデートするためにモジュール一式を再インストールするがエラーがでてしまう。暫定対応で追加しているモジュールのバージョンを下げた

手順と結果の状況

アップデート手順

npmコマンドを使って公式サイト通りにおこなう

手順の参考

参考: https://nuxtjs.org/ja/docs/get-started/upgrading/#npm

sudo rm -rf node_modules/
sudo rm package-lock.json
npm install

エラー内容

アップデートをすると下記のようなエラー

Vue packages version mismatch:

- vue@3.2.31
- vue-server-renderer@2.6.14

This may cause things to work incorrectly. Make sure to use the same version for both.

vue関連のモジュールインストール状況を見る

npm list vue
...
├─┬ bootstrap-vue@2.21.2
│ └─┬ portal-vue@2.1.7
│   └── vue@2.6.14
├─┬ nuxt@2.15.8
│ ├─┬ @nuxt/vue-app@2.15.8
│ │ ├── vue@2.6.14
│ │ └─┬ vuex@3.6.2
│ │   └── vue@2.6.14 deduped
│ └─┬ @nuxt/vue-renderer@2.15.8
│   └── vue@2.6.14
└─┬ vuex-persistedstate@4.1.0
  └─┬ vuex@4.0.2
    └─┬ vue@3.2.31
      └─┬ @vue/server-renderer@3.2.31
        └── vue@3.2.31 deduped

2022/03/02現在だとnuxt.jsはベータ版3が公開されておりnuxt.jsのバージョン2はv2.15.8で止まっている様子

参考: https://nuxtjs.org/ja/releases

vueのバージョンを2によせるしかなさそう。

原因はvuex-persistedstate@4.1.0の依存モジュール

vuex-persistedstateについては現在非推奨になってしまっていた。

参考: https://www.npmjs.com/package/vuex-persistedstate/v/4.1.0

暫定対応

根本的な対策はこのモジュールは使わず別の方法を模索しないといけないが時間がかかりそう。一旦モジュールのバージョンを下げて対応してその後、根本的な対策をしておきたい。

packege.jsonを変更

packege.json

{
  "dependencies": {
    "vuex-persistedstate": "^3.2.1",
  }
}

インストールやり直し

sudo rm -rf node_modules/
sudo rm package-lock.json
npm install

エラー回避されたようなので念の為状況確認

npm list vue
...
├─┬ bootstrap-vue@2.21.2
│ └─┬ portal-vue@2.1.7
│   └── vue@2.6.14 deduped
├─┬ nuxt@2.15.8
│ ├─┬ @nuxt/vue-app@2.15.8
│ │ └── vue@2.6.14 deduped
│ └─┬ @nuxt/vue-renderer@2.15.8
│   └── vue@2.6.14 deduped
└─┬ vuex-persistedstate@3.2.1
    ├── vue@2.6.14
    └─┬ vuex@3.6.2
    └── vue@2.6.14 deduped

vuex-persistedstateの代替えについてはまた別途紹介したいと思います。

Becomブログ