カクカクしかじか

技術的なアレコレ

Nuxt.jsのバージョンがnuxt@2.15.2とnuxt@2.15.4でbuildModulesで指定したプラグインの探索の仕方が変わった?

概要

Nuxt.jsで新規作成したアプリ( nuxt@2.15.4 )で Composition API を利用しようとして、 nuxt.config.js に以下のようにプラグインとして追加したところ以下のエラーが...

buildModules: [
  '@nuxtjs/composition-api'
],
✖ Nuxt Fatal Error                                                          │
   │                                                                               │
   │   Error: Cannot find module '@nuxtjs/composition-api'

うまくプラグインをロード出来なかったっぽい🤔 nuxt@v2.15.2 の既存プロジェクトだと普通に上記の定義で起動出来た。

$ npm run dev

> nuxt-sample@1.0.0 dev
> nuxt-ts


 WARN  You're using Nuxt 2.15.2, which includes built-in TypeScript runtime support                                                                                17:41:03


 WARN  You can safely use nuxt instead of nuxt-ts and remove @nuxt/typescript-runtime package                                                                      17:41:03

ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                               nuxt:tailwindcss 17:41:04
ℹ Merging Tailwind config from ~/tailwind.config.js                                                                                               nuxt:tailwindcss 17:41:04

   ╭───────────────────────────────────────────────────────╮
   │                                                       │
   │   Nuxt @ v2.15.2                                      │
   │                                                       │
   │   ▸ Environment: development                          │
   │   ▸ Rendering:   client-side                          │
   │   ▸ Target:      static                               │
   │                                                       │
   │   Listening: http://localhost:3000/                   │
   │                                                       │
   │   Tailwind Viewer: http://localhost:3000/_tailwind/   │
   │                                                       │
   ╰───────────────────────────────────────────────────────╯

バージョンが現在の最新の nuxt@2.15.4 の場合はドキュメントによると以下の形で書く必要がある模様🤔
https://composition-api.nuxtjs.org/getting-started/setup

{
  buildModules: [
    '@nuxtjs/composition-api/module'
  ]
}

無事に起動出来ることを確認 🙆‍♀️

$ npm run dev

> nuxt-www@1.0.0 dev
> nuxt


   ╭───────────────────────────────────────────────────────╮
   │                                                       │
   │   Nuxt @ v2.15.4                                      │
   │                                                       │
   │   ▸ Environment: development                          │
   │   ▸ Rendering:   client-side                          │
   │   ▸ Target:      static                               │
   │                                                       │
   │   Listening: http://localhost:3000/                   │
   │                                                       │
   │   Tailwind Viewer: http://localhost:3000/_tailwind/   │
   │                                                       │
   ╰───────────────────────────────────────────────────────╯

リリースノートを確認してみる

f:id:fuqda:20210414175045p:plain

NuxtConfig周りのバグFIXっぽいのでこれが怪しい?
(わからん...違ってたらすみません...)
https://ja.nuxtjs.org/docs/release-notes/#-bug-fixes

📝 該当PRっぽいもの
https://github.com/nuxt/nuxt.js/pull/8953

教訓

サボらず公式ドキュメントを愚直に確認しよう💪