Cannot destructure react component props

[izmttk]

Astro Info

Astro                    v3.5.4
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When running astro dev, I got an error "Cannot destructure property 'xxx' of 'undefined' as it is undefined" when using the map method on React component props. It seems like this error has occurred before and has been resolved in #660 , but it's happening again. If I missed something, please let me know.

What's the expected result?

no errors

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hrgerw

Participation

• [ ] I am willing to submit a pull request for this issue.

[matthewp]

Certainly seems straightfoward. Seems bad, but will need to take a closer look.

[matthewp]

This is related to not setting a key. Why this happens though is something I'm still investigating. But it's matter of missing the key, and it's giving you a bad error message.

[matthewp]

I think the way our code works is shadowing the warning from coming through. Looking into a fix.

[izmttk]

After adding a key prop, it works. Thanks a lot! :heart:

[jhedstrom]

This was quite the rabbit hole. Fixing/adding the key property anywhere a map method was being called resolved the issue, but the undefined error is very misleading 😬 The error also started seemingly at random, which was also very tricky to track down.

[fbzz]

+1, took me a long time to arrive here. Adding the key, worked.

Important mention: I was using on my index.astro, and it was only on the first render.

[mattiaz9]

I just tried to migrate from v2 to v4 and i'm getting this error. Using key didn't solve it for me

[mattiaz9]

I just tried to migrate from v2 to v4 and i'm getting this error. Using key didn't solve it for me

never mind, it was vite-plugin-svgr that was messing with astro somehow

[ulysses-ck]

After adding a key prop, it works. Thanks a lot! ❤️

What do you mean by adding a keyprop @izmttk ?

I already try to use a default value to the prop in the react component, but instead of giving the error is saying: " Astro detected an unhandled rejection. Here's the stack trace: TypeError: Cannot read properties of undefined (reading 'propNameExample')"

Edit: Nvm, I already realized it. I have an array where it is mapped into the component and does not have its own key to every item mapped.

[matthewp]

Is anyone still running into this issue? It seems cleared up when I use 4.8.

[firxworx]

@matthewp I just hit this running 4.10.3.

trace starts around @astrojs/react/server.js

I was using it with react-qr-code with its QRCode component inside another component that wraps it in a div.

[patheticGeek]

Hitting this issue in astro v4.14.5 & astro/react v3.6.2 It seems astro renders component first with the actual props supplied and no default props and the second render it does with the props supplied and default props merged https://stackblitz.com/edit/withastro-astro-jdt1mb

16:27:52 [200] / 3ms
MyComponent appContext undefined props {}
MyComponent appContext undefined props {}
TestComponent props {} <- first render with no default props
MyComponent appContext undefined props { foo: 'bar', abc: { def: 'ijk' } }
MyComponent appContext undefined props { foo: 'bar', abc: { def: 'ijk' } }
TestComponent props { foo: 'bar', abc: { def: 'ijk' } } <- second render with default props

[ematipico]

FYI, React, in dev mode, does two initial renders, so it might be related to that (last time I heard). Also, the issue seems different from OP.