Nuxt Content x TypeSciprtでProperty '$content' does not exist on type 'Context'エラー

2020.09.20
2021.05.11
Nuxt Content x TypeSciprtでProperty '$content' does not exist on type 'Context'エラー

レアケースな気がします。


Nuxt Contentを使っていて、記事を読み込む際に使う以下メソッドで、

async asyncData({ $content, params }: Context) {
・・
// => `Property '$content' does not exist on type 'Context'.`

とTypeScriptで型定義をした時に、 Property '$content' does not exist on type 'Context'. と表示されてしまいました。




公式の手順に書かれている

tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxt/content"
    ]
  }
}

を記載した上でこのエラーが表示されました。



公式を見る限り、

nuxt の動作方法のため、コンテキストの $content プロパティは TypeScriptのdeclaration merging機能 を通して、nuxt Context インターフェースにマージする必要があります。型に @nuxt/content を追加すると、パッケージから型をインポートし、TypeScript が Context インターフェースに追加されたものを認識するようになります。

インストール - Nuxt Content より引用

と書かれていて、複数ブログを参考にしても皆さんこの設定で動いているので、設定自体は間違いないはず。
と思い色々試行錯誤してみました。

解決策

先に結論から。


@nuxt/typesのバージョンを上げる事でエラーが表示されなくなりました。

  • @nuxt/content 1.8.1 の場合・・ @nuxt/types2.14.02.14.4 にして解決
  • @nuxt/content 1.14.0 の場合・・ @nuxt/types2.14.42.15.5 にして解決

@nuxt/types: ^2.14.0 の状態で、
$ yarn add @nuxt/types を実行し @nuxt/typesを最新の2.14.4にする事で同エラーが表示されなくなりました。



2021.05.11 追記

Nuxt Contentを1.11.1 → 1.14.0にアップデートした際に同様のエラーが起きました。


その際も$ yarn upgrade @nuxt/typesをして@nuxt/typesを最新の2.15.5にする事で解決出来ました!



この記事を最初に書いた時は yarn add ~で@nuxt/typesのバージョンを上げていましたが、

既に入っているパッケージである事を考えると$yarn upgrade ~の方が適していましたね

その他

正常に動いた時の関係ありそうなもののバージョン記載しておきます。

  • macOS・・10.15.6
  • yarn・・1.22.4
package.json
・・
"dependencies": {
  "@nuxt/content": "^1.8.1",
  "@nuxt/typescript-runtime": "^1.0.0",
  "nuxt": "^2.14.0"
},
"devDependencies": {
  "@nuxt/types": "^2.14.0",
  "@nuxt/typescript-build": "^2.0.2",
  "@types/axios": "^0.14.0",
  "@vue/test-utils": "^1.0.3",
  "axios": "^0.20.0",
  "babel-core": "7.0.0-bridge.0",
  "babel-jest": "^26.1.0",
  "jest": "^26.1.0",
  "prettier": "^2.1.1",
  "ts-jest": "^26.1.3",
  "vue-jest": "^3.0.4"
},
・・

おすすめ