Nuxt.jsのCannot read property 'fields' of undefinedを解決したい。

Question

Nuxt.jsのCannot read property 'fields' of undefined"を解決したい。

nuxt.js、contentful apiを使って簡単なブログの様なものを作成しようとしています。
ローカル環境でプロジェクトを起動させようとした際に、ターミナルでは正常に作動した様に見えるのですが、実際にローカルで開いてみるとエラーが発生します。
Cannot read property 'fields' of undefined"というのがいくら調べても曖昧な回答しか得られず、何がどうダメなのかが分からないので、教えて頂けるととてもありがたいです。

発生している問題・エラーメッセージ

######ターミナル上で表示されたエラー

ERROR [Vue warn]: Error in render: "TypeError: Cannot read property 'fields' of undefined"

found in

---> <Pages/index.vue> at pages/index.vue

   <Nuxt>
     <Layouts/default.vue> at layouts/default.vue
       <Root>

######ローカルのページで表示されるエラー(表示されている文を書き写したものになります。)

Cannot read property 'fields' of undefined

pages/index.js:146:60（しかし、pagesの下にindex.jsは無く、index.vueとReadme.mdがあるのみです）

pages/index.js
Missing stack frames

pages/index.vue:20:

pages/index.vueopen in editor
:key="i"
cols="12"
sm="6"
lg="4"
xl="3"
>
<v-card max-width="400" class="mx-auto" >
<v-img

該当のソースコード

#####pages/index.vue

<template>
  <v-container fluid>
    <v-row
      justify="center"
    >
      <v-col
        cols="12"
        sm="11"
        md="10"
        xl="8"
      >
        <v-row v-if="posts.length">
          <v-col
            v-for="(post, i) in posts"
            :key="i"
            cols="12"
            sm="6"
            lg="4"
            xl="3"
          >
            <v-card
              max-width="400"
              class="mx-auto"
            >
              <v-img
                :src="post.fields.image.fields.file.url"
                :alt="post.fields.image.fields.title"
                :aspect-ratio="16/9"
                max-height="200"
                class="white--text"
              >
                <v-card-title class="align-end fill-height font-weight-bold">
                  {{ post.fields.title }}
                </v-card-title>
              </v-img>

              <v-card-text>
                {{ post.fields.publishDate }}
              </v-card-text>
              <v-list-item three-line style="min-height: unset;">
                <v-list-item-subtitle>
                  {{ post.fields.body }}
                </v-list-item-subtitle>
              </v-list-item>
              <v-card-actions>
                <v-spacer />
                <v-btn
                  text
                  color="primary"
                >
                  この記事をみる
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
        <div v-else class="text-center">
          投稿された記事はありません。
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import client from '~/plugins/contentful'

export default {
  async asyncData ({ env }) {
    let posts = []
    await client.getEntries({
      content_type: env.CTF_BLOG_POST_TYPE_ID,
      order: '-fields.publishDate'
    }).then(res => (posts = res.items)).catch()
    return { posts }
  }
}
</script>

試したこと

申し訳ないのですが、Cannot read property 'fields' of undefinedやその周辺のキーワードで検索しただけです。3時間ほどかけて検索や関連のエラーの対策なども検索してみましたが、はっきりとしたワードや解決策が得られず、今回質問させていただいています。
どうかよろしくお願いします。

補足情報（FW/ツールのバージョンなど）

使っているもの
Macbook２０１７
Nuxt.js v2.11.0
yarn 1.21.0
contentful api

Answer 1

エラー文の一行目を訳するなら、

undefined のプロパティ 'fields' を読むことができません。

となります。

つまり、何かの変数の 'fields' プロパティにアクセスしようとした際に、その変数が undefined だったことが発覚してエラーとなっています。

ご提示のコードの中で言うと、post.fields の post か、post.fields.image.fields の image のいずれかが undefined のために例外が発生しているものと思われます。

ログ出力するなり、vue-devtool のブラウザ拡張を利用するなりして原因箇所を特定してください。

ちなみに、index.js は nuxt 付属のコンパイラがあなたの pages/index.vue をコンパイルして生成したファイルだと思います。

Comments

[yata_]

遅くなりましたが、ありがとうございます！
教えてくださった内容を試してみます！

[yata_]

ログ出力とvue-devtoolsに関してなのですが、ログ出力に関しては検索したのですが自分の理解力がなくてできず、vue-devtoolsは導入はしてみたものの、エラーが出る画面では使用できませんでした。
何回も質問してしまい申し訳無いのですが、このような場合どうしたら良いでしょうか？

[R.Mizukami]

一端疑わしい箇所をまとめてコメントアウト等で無効化することでとりあえず動くようになると思います（例えば <v-row> を丸々コメントアウトする等）。
その状態で、適当なデバッグ用のボタンをつけるとか、 created にログ出力を行うメソッドをつけるとか、vue-devtool を使うとか、なんでもいいですが質問者さまが理解できる方法で vue インスタンスのプロパティ $vm.posts[0]　や $vm.posts[0].fields.image などがどうなっているか( undefined になっていないか)確認すれば、原因が分かると思いますということです。

[yata_]

ありがとうございます！
コメントアウトしてみます！