Cannot read properties of undefined (reading 'image' in components/promptcard.jsx

[rana002]

error TypeError: Cannot read properties of undefined (reading 'image')
at PromptCard (./components/PromptCard.jsx:46:51)
35 | >
36 | <Image

37 | src={post.creator.image}
| ^
38 | alt='user_image'
39 | width={40}
40 | height={40}

[yeshwantthota]

@rana002 Getting the same error, have you found any solution?

[MihailoMilic]

@rana002 @yeshwantthota problem is that the server renders the image before it is able to fetch post.creator.image resulting in undefined. You can fix that by simply adding ? between creator and image like this post.creator?.image or you can use a conditional
{post.creator && post.creator.image} so that it only renders when it acquires the needed data.

[Niti9]

@MihailoMilic bro can you send me full source code of this Promptopia website

[MihailoMilic]

@Niti9 just change post.creator.image to post.creator?.image

[harikris001]

@MihailoMilic
but the content is missing. it is rendered like this

console shows the required attribute 'src' missing.

[kunalborkar2001]

Have anyone fixed this issue?

[kunalborkar2001]

@MihailoMilic but the content is missing. it is rendered like this

console shows the required attribute 'src' missing.

Same issue

[cleph01]

Same issue. Optional chaining not fixing the issue. I think it has to do with the "populate" method in the GET posts end-point [const prompts = await Prompt.find({}).populate("creator")]. It doesn't seem do be doing anything.

[EDIT] The problem was how I was accessing the userId from the session in my createPrompt function. In my post request, I was sending {..., userId: session?.user._id} <-- the session knows the userId as user.id --> so the correct reference should be: {..., userId: session?.user.id}

Everything working fine for me now. Hope this helps.

[kunalborkar2001]

this error comes when you use cluster url for the mongo and not on the local mongo url

[Goniknr]

I deleted everything in my database and now it's fine.

[grunsho]

Fixed the issue with the following steps:

1. Change the content of "images" on the next.config.mjs file with the following code:

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
        pathname: '/**',
      },
    ],

This is because In Next.js Version 14, domains configuration has been deprecated in favour of remotePatterns.

2. Use the optional chaining in create-prompt/page.jsx: post.creator?.image
3. Clear the database and it will work perfectly.

[kunalborkar2001]

You are God bro ❤️

…

On 11-Mar-2024, at 11:22, Alvaro Manterola ***@***.***> wrote: Fixed the issue with the following steps: Change the content of "images" on the next.config.mjs file with the following code: images: { remotePatterns: [ { protocol: 'https', hostname: 'lh3.googleusercontent.com', port: '', pathname: '/**', }, ], This is because In Next.js Version 14, domains configuration has been deprecated in favour of remotePatterns. Use the optional chaining in create-prompt/page.jsx: post.creator?.image Clear the database and it will work perfectly. — Reply to this email directly, view it on GitHub <#62 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BA34AXJZA553E4NG2KTMDV3YXVBDFAVCNFSM6AAAAAA33QJ5MOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGY3TSNZUG4>. You are receiving this because you commented.