"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 -

react-native-reanimated/src/reanimated2/initializers.ts

Line 171 in 8f36f64

global.console = {

- 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

react-native-reanimated/src/reanimated2/initializers.ts

Line 171 in 8f36f64

global.console = {

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

react-native-reanimated/src/reanimated2/initializers.ts

Line 171 in 8f36f64

global.console = {

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.

[marcofuentes05]

Same here, just updated to RN 0.74.4 from 0.71.3

[ConnorNusser]

@marcofuentes05 @wsiddiqui-nisum-com, did you guys ever find a solution?

[reanzi]

On Mon, 25 Nov 2024 at 04:23, ConnorNusser ***@***.***> wrote: @marcofuentes05 <https://github.com/marcofuentes05> @wsiddiqui-nisum-com <https://github.com/wsiddiqui-nisum-com>, did you guys ever find a solution? — Reply to this email directly, view it on GitHub <#4225 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE2EWNZ5P3M7RB2LXVO7UG32CJ32JAVCNFSM6AAAAABQCOCRJ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOJWGQ4TCMJUHA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

As of me, I didn’t find a solution to this.

[manzoorsofi]

I am currently using the following versions in my project:

react-native-reanimated: ^3.0.0-rc.0
React Native: 0.76.2
I’m facing a serious issue where the error “property is not configurable” occurs consistently in the following scenarios:

When using FlatList.
When using any package that internally depends on FlatList.
This issue is severely impacting the project as FlatList is widely used. It needs urgent attention and resolution.

[mlazari]

@manzoorsofi What is the exact version of react-native-reanimated you are using? "react-native-reanimated: ^3.0.0-rc.0" is not specific enough, you could have the old 3.0.0-rc.0 or the newest 3.16.5 (which might have fixed the error), depending on what is the locked version in package-lock.json / yarn.lock. You can verify in node_modules/react-native-reanimated/package.json what version is installed, or run npm ls react-native-reanimated --depth=0 if using npm (for yarn would probably be something like yarn info react-native-reanimated).

[manzoorsofi]

@mlazari i am using react-native-reanimated@3.16.5

[manzoorsofi]

@mlazari "I'm encountering the same error whenever I use FlatList. Previously, I avoided using FlatList to bypass the issue, but now I've reached a point in the project where I need to integrate GooglePlacesAutocomplete. The problem arises in a component where, as soon as I start typing, the issue occurs."

[mlazari]

@manzoorsofi Ok, I had this error last year but don't have it anymore so I thought maybe you were on an older version. I don't remember what fixed it, but I think it was a react-native-reanimated update. As far as I remember it was related to console warns, so maybe your FlatLists are triggering some warnings. For example I think duplicate keys (2 data items with the same id, or whatever key is keyExtractor prop returning if you are using it) would trigger a warning.

[manzoorsofi]

can you tell me where exactly are these console warns
i will comment these out

[mlazari]

@manzoorsofi It's somewhere in the react dependency I guess. It's the message mentioned here: https://stackoverflow.com/questions/56174189/why-is-there-double-with-the-same-key-in-my-react-native-flatlist (search for "Encountered two children with the same key" in node_modules) and it could be a console.warn(...) or a console.error(...), I don't remember exactly. Commenting it out would be just a way to test if that's the cause though and not a reliable solution, since there could be many other places in the code / other dependencies that call console.warn / console.error.

[mlazari]

@manzoorsofi I found where this was fixed - #4252 (comment)
Not sure why that didn't fix it for you though. Maybe it is a different issue - from your screenshot it looks like a different stack trace than the original issue.

[manzoorsofi]

@mlazari ok was it working in version v3.1.0 ????

[mlazari]

@manzoorsofi Yes, 3.1.0 fixed this issue for me and it's still working in the latest 3.16.5 for me (but I am using the latest react-native too, 0.76.5, with new architecture turned off).

[wsiddiqui-nisum-com]

@ConnorNusser @mlazari @manzoorsofi @reanzi @marcofuentes05
Hi Everyone, apologies for replying late, i tried different versions, but unfortunately this issues comes with the Flatlist, so as a workaround, i transformed all my FlatList to ScrollView and it worked like a charm.

Code Example:

{data.map((item, index) => renderListItem(item, index !== (data.length - 1)))}

   const renderListItem = (item, showSeparator) => {
const selected = current && item.key === current.key;
return (
  <>
    <TouchableOpacity key={item.key} onPress={() => selectItem(item)}>
      <View style={styles.optionItem}>
        <Text style={styles.itemText}>{item.value}</Text>
        {selected && (
          <View style={styles.optionCheck}>
            <CircleTick />
          </View>
        )}
      </View>
    </TouchableOpacity>
    {showSeparator && <View style={styles.separator} />}
  </>
);

};

so it exactly looks and behaves like Flatlist. Hope it helps.

[mlazari]

@manzoorsofi I just saw the issue you opened in React Native, but that repro repository you posted doesn't seem to be public, it's giving me a 404 error.

[manzoorsofi]

@mlazari @wsiddiqui-nisum-com
can you check the it again,
i have made it public.

[mlazari]

@manzoorsofi I took a look and it seems to be related to react-native-svg-transformer

This change in metro.config.js fixes the error as far as I can tell:

Not sure why though, since your project doesn't seem to use expo modules as far as I can tell, so it should work without selecting react-native explicitly.

This is not the same issue as this react-native-reanimated issue, which was resolved in version 3.1.0.

[mlazari]

@manzoorsofi It's probably something in your local environment, I don't see it on my side and I tried both iOS and Android. Maybe you need to clear some cache and / or rebuild the app or something. The only thing I see is this warning which seems to come from native-base (GeekyAnts/NativeBase#5758):

[manzoorsofi]

@mlazari
TypeError: property is not configurable
This error is located at:
in VirtualizedList (created by FlatList)
in FlatList (created by GooglePlacesAutocomplete)
in RCTView (created by View)
in View (created by GooglePlacesAutocomplete)
in GooglePlacesAutocomplete (created by AddLocationPopup)

`    <View>
          <GooglePlacesAutocomplete
            placeholder="Search for an address"
            onPress={(data, details = null) => {
              console.log(data, details);
              setAddress(data.description);
            }}
            query={{
              key: 'AIzaSyAPxqN1vq5grUb-9898',
            }}
            fetchDetails={true}
            styles={{
              container: styles.autocompleteContainer,
              textInput: styles.textInput,
            }}
          />
        </View>
        <Text style={styles.selectedAddress}>
          Selected Address: {address}
        </Text>`

[mlazari]

@manzoorsofi Did you update your metro.config.js file as I showed above ("react-native-svg-transformer/react-native" instead of "react-native-svg-transformer")? That fixes that FlatList issue for me. You have to close the bundler and restart it (npm run start) and restart the app to see the change.

[manzoorsofi]

No @mlazari
i added that and restarted the project but i the same error

`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**

• Metro configuration
• https://reactnative.dev/docs/metro
• @type {import('metro-config').MetroConfig}
  */
  const defaultConfig = getDefaultConfig(__dirname);

const config = {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer/react-native'),
},
resolver: {
assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
},
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

`

[mlazari]

@manzoorsofi Sorry, I am not sure why it's not working for you. I am able to reproduce the issue with babelTransformerPath: require.resolve('react-native-svg-transformer'), but not with babelTransformerPath: require.resolve('react-native-svg-transformer/react-native') 🤷

[manzoorsofi]

@mlazari You checked the GooglePlacesAutocomplete in my repo ??

[mlazari]

@manzoorsofi I don't have the repo on the computer that I use now, but on the other one yes, I think the way I was reproducing was add doctor -> select location or something like that. I even tried deleting all app code in src and just rendering a FlatList and the error was reproducible with 'react-native-svg-transformer', but not with 'react-native-svg-transformer/react-native'.

[mlazari]

@manzoorsofi If you can give me read access to the repo I could give it another try on the computer I am using now, to make sure it was not something specific on the other computer.

[manzoorsofi]

@mlazari Sure
i have sent invite.

[mlazari]

@manzoorsofi You're right, on this computer that change doesn't seem to fix it...

[manzoorsofi]

Damn,
@mlazari i even tried the latest react native 76.5
1.there also didn't work
i tried react native reanimated version 2 also
nope

what to do ??
how can we raise this to the react native team?

[mlazari]

@manzoorsofi I pushed a change that seems to fix that error in the fix-error branch. Basically it is using presets: ['module:@react-native/babel-preset'], instead of presets: ['module:metro-react-native-babel-preset'], in babel.config.js (that's what a newly created project with that version of react-native comes with, but looks like you changed it for some reason), and removing these plugins:

    ['@babel/plugin-transform-class-properties', { loose: false }],
    ['@babel/plugin-transform-private-methods', { loose: false }],
    ['@babel/plugin-transform-private-property-in-object', { loose: false }],