npm audit fix したら npm version mismatch が発生した場合の解決方法

このブログにRSS配信機能を実装しようと思い、 @nuxt-feed をインストールしようとしたところ、次の脆弱性のアラートが上った。

$ npm install @nuxtjs/feed

added 6 packages, and audited 1617 packages in 9s

186 packages are looking for funding
  run `npm fund` for details

16 vulnerabilities (14 moderate, 2 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

@nuxt-feed をインストールしようとしたことは直接的な原因ではない。
npm install コマンドを実行するタイミングで、そのアプリケーションで使用しているライブラリの脆弱性チェックが走るのだが、たまたまこのタイミングで脆弱性が発見されただけである。

2 high とあるので、クリティカルな脆弱性が2件あったということである。
そのため、アラートの内容に従い、 npm audit fix した。
npm audit fix は脆弱性が含まれていないバージョンを探し、そのアプリケーションで使用しているライブラリのバージョンを自動で変更してくれるコマンド)

$ npm audit fix

added 20 packages, removed 13 packages, changed 198 packages, and audited 1624 packages in 31s

196 packages are looking for funding
  run `npm fund` for details

# npm audit report

glob-parent  <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751
fix available via `npm audit fix --force`
Will install nuxt@2.13.3, which is a breaking change
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/webpack
          @nuxt/webpack  >=2.14.0
          Depends on vulnerable versions of webpack
          node_modules/@nuxt/webpack
            @nuxt/builder  >=2.14.0
            Depends on vulnerable versions of @nuxt/webpack
            node_modules/@nuxt/builder
            nuxt  >=2.14.0
            Depends on vulnerable versions of @nuxt/webpack
            node_modules/nuxt

8 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

これ自体は問題なく終わったのだが、その後、 npm run dev が失敗するようになってしまった。

$ npm run dev

> developer.same-san.com@1.0.0 dev
> nuxt


 FATAL                                                                                                                                                     15:18:06

Vue packages version mismatch:

- vue@2.6.12
- vue-server-renderer@2.6.14

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


  
  Vue packages version mismatch:
  
  - vue@2.6.12
  - vue-server-renderer@2.6.14
  
  This may cause things to work incorrectly. Make sure to use the same version for both.
  
  at Object.<anonymous> (node_modules/vue-server-renderer/index.js:8:9)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
  at Module.load (node:internal/modules/cjs/loader:967:32)
  at Function.Module._load (node:internal/modules/cjs/loader:807:14)
  at Module.require (node:internal/modules/cjs/loader:991:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at Object.<anonymous> (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:19:27)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)


   ╭────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                            │
   │   ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   Error:                                                                                   │
   │                                                                                            │
   │   Vue packages version mismatch:                                                           │
   │                                                                                            │
   │   - vue@2.6.12                                                                             │
   │   - vue-server-renderer@2.6.14                                                             │
   │                                                                                            │
   │   This may cause things to work incorrectly. Make sure to use the same version for both.   │
   │                                                                                            │
   │                                                                                            │
   ╰────────────────────────────────────────────────────────────────────────────────────────────╯

npm ERR! code 1
npm ERR! path /Users/xxx/Develop/developer.same-san.com/www
npm ERR! command failed
npm ERR! command sh -c nuxt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2021-09-17T12_18_06_044Z-debug.log

これは npm audit fix の実行により、 vue@2.6.12vue-server-renderer@2.6.14 のバージョンが同じでなくなったことが原因で発生しているエラーらしい。

解決方法

バージョンが異なるならば、バージョンを揃えればOK。
特段の事情がない限りは(セキュリティなどの面で)新しいほうに揃えるほうが良い。
そのため、まずは vue2.6.14 にアップデート可能か確認する。

$ npm info vue@2.6 version
vue@2.6.0 '2.6.0'
vue@2.6.1 '2.6.1'
vue@2.6.2 '2.6.2'
vue@2.6.3 '2.6.3'
vue@2.6.4 '2.6.4'
vue@2.6.5 '2.6.5'
vue@2.6.6 '2.6.6'
vue@2.6.7 '2.6.7'
vue@2.6.8 '2.6.8'
vue@2.6.9 '2.6.9'
vue@2.6.10 '2.6.10'
vue@2.6.11 '2.6.11'
vue@2.6.12 '2.6.12'
vue@2.6.13 '2.6.13'
vue@2.6.14 '2.6.14'

vue@2.6.14 があることが確認できたので、次のコマンドを実行する。

npm install vue@2.6.14

再び npm run dev を実行したところ、無事に起動するようになった。

執筆日: