[Nuxt] @nuxt/color-modeを使おうとしたらエラーが出た

今回の題

NuxtとTailwindCSSで作った個人ブログでダークモードを試してみようと考え、公式を参考に@nuxtjs/color-modeというモジュールをインストールしました。

$ npm install @nuxtjs/color-mode

インストール後に公式の通りにnuxt.config.jsに設定を済ませコンパイルを行ったところ、
下記のエラーが出てきました。

 FATAL  Cannot find package '@nuxt/kit' imported from プロジェクトまでのパス/node_modules/@nuxtjs/color-mode/dist/module.mjs

@nuxt/kitというパッケージが無いよ、怒られてます。
ところが、@nuxtjs/color-modeの公式を見ても、そんなパッケージを入れるようにとは書かれていません。
なら原因は何かと調べたところ、以下のようなすごく初歩的なミスでした😓

原因

原因：@nuxtjs/color-modeのバージョン

パッケージ周りのエラーでまず疑わしいのはバージョンだと思いますが、
今回はまさにそこでした。

今回、使用していたNuxtのバージョンは2.15.8。いわゆるNuxt2系です。
@nuxt/color-modeの最新版(メジャーバージョンが3のもの)はNuxt3系のみに対応しているので、インストール時にバージョンを指定してあげる必要がありました。

解決方法

間違えたものを削除します。

$ npm uninstall @nuxtjs/color-mode

以下で提供されているバージョンを調べます。

$ npm info @nuxtjs/color-mode versions

↓結果。

[
  '0.0.1',        '0.0.2',
  '1.0.0',        '1.0.1',
  '1.0.2',        '1.0.3',
  '1.1.0',        '1.1.1',
  '2.0.0',        '2.0.1',
  '2.0.2',        '2.0.3',
  '2.0.4',        '2.0.5',
  '2.0.7',        '2.0.8',
  '2.0.9',        '2.0.10',
  '2.1.0',        '2.1.1',
  '3.0.0-beta.0', '3.0.0-beta.1',
  '3.0.0',        '3.0.1'
]

この中でメジャーバージョン2の最新のものである2.1.1をインストール。

npm install @nuxtjs/color-mode@2.1.1

無事にコンパイルも行え使用出来るようになりました。

参考

Nuxt Color Mode - Setup
このバージョンに関する注意喚起は、Setupの項目の一番初めに大きく書かれていました😓