"Property not configureable" error on Development when upgrading to V3

[im-alihashmi14]

Description

This issue is only starting to occur after upgrading the current project to V3.

I don't know if it's bugging everyone or not but in all my projects is behaving the same way. I even initialise the new project still same error.

Steps to reproduce

1. Upgrade your renanimated to v3
2. Make this Error intentionally: "Each child in a list should have a unique "key" prop." => Console.warn would initialise this error

Snack or a link to a repository

https://github.com/im-alihashmi14/ReanimatedV3

Reanimated version

3.0.1

React Native version

0.66.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[im-alihashmi14]

Repo is pushed to this https://github.com/im-alihashmi14/ReanimatedV3

[ergenekonyigit]

I have the same problem with

Reanimated version 3.0.2

React Native version 0.67.5

Platforms Android, iOS

JavaScript runtime Hermes

Workflow React Native (without Expo)

Architecture Paper (Old Architecture)

Build type Debug mode

[adeelbCB]

Got same error on react-native 0.66.3 reanimated ^3.0.0

[Isrrr]

Got same error on react-native 0.71.4 reanimated ^3.0.2

[OxamaHxn]

Got same error on reanimated ^3.0.0

[JB-CHAUVIN]

Same error goes for me since reanimated v3. It look like it's relating to renders with .map() instead of FlatList. When I replace .map() by a FlatList, it's working.

In the repro provided, there is a .map(). So it confirms my theory ;-)

          {['Test', 'Reanimated'].map(t => (
            <Animated.View>
              <Text>{t}</Text>
            </Animated.View>
          ))}

[im-alihashmi14]

@JB-CHAUVIN If you put keys to the array items then it also gets resolved. It is due to the console.log that trigger the warning Each child in a list should have a unique "key"

[hashamnadeem21]

I've encountered a similar issue with Reanimated V3 where I have to press Ctrl+S every time to start the app. This seems to be a recurring problem and could potentially be a hindrance to the app's overall usability. Error: Each child in a list should have a unique "key" Any suggestions on how to resolve this issue would be greatly appreciated."

[freeboub]

did you correctly do the yarn start --reset-cache after upgrading ? I think I had similar issue and reset-cache fixed it

[mcnaveen]

I'm on "react-native-reanimated": "^3.0.2" and facing a similar issue. Doing yarn start --reset-cache didn't help.

[fgagneten]

Same error here with reanimated > 3.0.0

[mlazari]

I get a different error, but it is probably related to this one:

From what I found it seems to happen when console.warn('...') is called somewhere in the app (in my case it is called from react navigation). If I comment out this assignment - https://github.com/software-mansion/react-native-reanimated/blob/8f36f64b0ddfb5b3d01aca8286a77af6e3370a6a/src/reanimated2/initializers.ts#L171 - the error goes away. I tried to reproduce in a new project, but I get this "property is not configurable" error instead there when console.warn('...') is called.

[mlazari]

I was able to reproduce my error (not exactly the same, but similar) in a new project as well by calling console.warn(...) directly in the component (in addition to "property is not configurable" error):

If I call it from a useEffect I get only the "property is not configurable" error:

Both errors appear on iOS only, I don't seem them on Android.

Repro: https://github.com/mlazari/ReanimatedRepro/blob/main/App.tsx#L60

[fgagneten]

I was able to repro on Android, so the issue is on both platforms

[freeboub]

On my side issue happened when using require('file'). I have no issue on 3.0.0-rc.10 (tested only on Android) . Can it be linked to babel ? I had a look into diff between these versions, I didn't find anything relevant...

[mlazari]

I was able to repro on Android, so the issue is on both platforms

@fgagneten Yes, with map without key I am able to reproduce the error on both platforms: https://github.com/mlazari/ReanimatedRepro/blob/map-without-key/App.tsx#L78

[mlazari]

I don't know what would be the solution, but the problem seems to come from this assignment https://github.com/software-mansion/react-native-reanimated/blob/8f36f64b0ddfb5b3d01aca8286a77af6e3370a6a/src/reanimated2/initializers.ts#L171 that makes the properties of console non-configurable and thus makes this call to Object.defineProperties in React throw that error - https://github.com/facebook/react/blob/v18.2.0/packages/shared/ConsolePatchingDev.js#L46

[mnghn07]

I don't know what would be the solution, but the problem seems to come from this assignment

https://github.com/software-mansion/react-native-reanimated/blob/8f36f64b0ddfb5b3d01aca8286a77af6e3370a6a/src/reanimated2/initializers.ts#L171

that makes the properties of console non-configurable and thus makes this call to Object.defineProperties in React throw that error - https://github.com/facebook/react/blob/v18.2.0/packages/shared/ConsolePatchingDev.js#L46

Can confirm that the issue is from the global.console assignment that @mlazari has mentioned. Temporarily commenting out and package-patching resolves my problem..for now.

[mcnaveen]

I'm on "react-native-reanimated": "^3.0.2" and facing a similar issue. Doing yarn start --reset-cache didn't help.

FYI, I downgraded to v2.14.4 and everything seems to be working fine.

[ngvcanh]

My team member told me he got this error because he forgot to pass the key to the map loop. And when he passed the key to the map loop this error was solved. 5 minutes ago

[Jaman-dedy]

My team member told me he got this error because he forgot to pass the key to the map loop. And when he passed the key to the map loop this error was solved. 5 minutes ago

But honestly, they need to update their docs or even throw a good message.

[mlazari]

But honestly, they need to update their docs or even throw a good message.

The app should not throw an error on console.warn() calls. I think a map loop without a key is just one case when this error happens. If some other library or the app code calls console.warn() the same error happens, at least on iOS, as you can see from my comments above.

[mehdinourollah]

Thanks to @mlazari I patched it for now so I can continue my work...BTW I checked the project and I don't see any mapping object without providing keys to them so I don't think it was from that...

[anuragipankaj]

I'm facing the same issue, how to fix this now? : (

[mnghn07]

I'm facing the same issue, how to fix this now? : (

You can either, downgrade to 2.14.4. Or try to comment out these global.console defines, then use patch-package to patch everything up. https://github.com/software-mansion/react-native-reanimated/blob/8f36f64b0ddfb5b3d01aca8286a77af6e3370a6a/src/reanimated2/initializers.ts#L171

[Garamani]

In my case, this issue was related to the unique keys.

1. I searched unique word to find the errors in the terminal window.
2. I checked and fixed the issues by making all the keys unique.
3. I checked all the screens where the Reanimated package was used.
4. I checked the FlatLists, the map fucnctions, Carousels, and galleries that were using FlatList or Reanimated underhood and I defined unique keys for top rendered items (View, TouchableOpacity, ...)

After doing all the steps above, the error disappeared. This bug actually helped me to fix some of the issues that I had and was not aware of.

[regalstreak]

the timing here is crazy, just faced this and its getting solved as my and my coworker discuss

[herarya]

My team member told me he got this error because he forgot to pass the key to the map loop. And when he passed the key to the map loop this error was solved. 5 minutes ago

this one is working :D

[reanzi]

Hello guys! I face the same problem: I don't a map without key at a moment, and more strangely; when the error screen is shown if I hit save (ctl + s) the editor the app reload and every thing works just fine. The problem only appears when I relaunch the app in the emulator. How to resolve this and what would I be doing wrong. : ) thanks

[Latropos]

@reanzi You probably should update react-native-reanimated, because this issue was only solved in the last release. It is also possible that you have found some other bug - in such a case you can open a new issue and provide description of your problem with some reproduction, so we can work to fix it as well.