Cannot read property 'fields' of undefined

[kwibus2000]

I am following the example how to build a cms-contentful blog. I get the error message: "Cannot read property 'fields' of undefined". Relatively new to next.js; where should I look and what should I do to find the source of this error?

[cdock1029]

Almost always necessary to include some sort of code sample, link to repo, or explicit error message for help to be possible, especially on common errors like "undefined".

Find out what object "fields" was being read from, find the line in code where this occurs. Find where this object should be initialized with data, or guarded for not existing

Quick search of "fields" in this repo https://github.com/zeit/next.js/search?q=fields&unscoped_q=fields

shows this file:

https://github.com/zeit/next.js/blob/1a7a14e5e24250ac45cd7e08ea52dc82306074e8/examples/cms-contentful/lib/api.js

Ctrl+F "fields" shows usage of it.

[kwibus2000]

I am sorry; I don't have any clue. These are the lines of code where the error is:
parseAuthor
./lib/api.js:20
17 | console.log(fields);
18 | return {
19 | name: fields.name,

20 | picture: fields.picture.fields.file,
21 | };
22 | }
23 |

[cdock1029]

See how the error message shows method call stack in reverse order?
parseAuthor is called by parsePost is called by parsePostEntries is called by getAllPostsForHome

log the data in all, some, or the first of those methods until you get some clarity on what you are receiving from the CMS.

Perhaps first though, ensure you have setup your environment variables correctly for your Contentful account. But somewhere, log the data you are getting. If errors occur before you log runs, move it earlier in the call stack.

[leerob]

That error is saying that fields.picture is undefined, so when you try to access the property fields it throws an error.

Something isn't set up right with the information you're receiving from Contentful. I would compare that console.log above to see what data you're actually getting back for fields.

[kwibus2000]

SOLVED! I found out that the name of the author image should also be 'picture'. I called it 'image'.

Discussion closed; and a big thankyou to all contributors!

[Dannymx]

I'm also getting a missing field, but the missing field is dateString, if I remove the component for dates everything works fine, but I also console logged my posts and I see the dates in both posts. Any ideas?

[
  {
    title: 'This is my first post',
    slug: 'this-is-my-first-post',
    date: '2020-05-28T01:00-05:00',
    content: { data: {}, content: [Array], nodeType: 'document' },
    excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    coverImage: {
      url: '//images.ctfassets.net/ou5mygykrk5e/1zDIEj1Nr5iwjogjRYAWwE/e238601b34441bfb8e561010afecebe4/yoav-aziz-tKCd-IWc4gI-unsplash.jpg',
      details: [Object],
      fileName: 'yoav-aziz-tKCd-IWc4gI-unsplash.jpg',
      contentType: 'image/jpeg'
    },
    author: { name: 'Danny', picture: [Object] }
  },
  {
    title: 'This is my second post!',
    slug: 'this-is-my-second-post',
    date: '2020-05-28T01:00-05:00',
    content: { data: {}, content: [Array], nodeType: 'document' },
    excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    coverImage: {
      url: '//images.ctfassets.net/ou5mygykrk5e/2elN4gHz3aZSqboFOD0m6R/f3068a8fb848d282f766177cbe8a88ed/clay-banks-hwLAI5lRhdM-unsplash.jpg',
      details: [Object],
      fileName: 'clay-banks-hwLAI5lRhdM-unsplash.jpg',
      contentType: 'image/jpeg'
    },
    author: { name: 'Danny', picture: [Object] }
  }
]

[neamatmim]

Hi,
Looks like we shouldn't use Date as a component name . it's a predefine JavaScript object . I change the component name from Date to CustomDate and It's solve the issue.

[stevendelro]

I just spent two hours trying to figure out how to resolve this "TypeError: Cannot read property 'dateString' of undefined" issue. Thank you for this response.