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?.imageor 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 https://github.com/adrianhajdin/project_next_14_ai_prompt_sharing/issues/62#issuecomment-1987679747, or unsubscribe https://github.com/notifications/unsubscribe-auth/BA34AXJZA553E4NG2KTMDV3YXVBDFAVCNFSM6AAAAAA33QJ5MOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGY3TSNZUG4. You are receiving this because you commented.