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

2020.09.19

2021.05.10

Nuxt Content x TypeScriptで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/typesを 2.14.0 → 2.14.4 にして解決
@nuxt/content 1.14.0 の場合・・ @nuxt/typesを 2.14.4 → 2.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"
},
・・