search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.41k stars 24.25k forks source link

Flatlist render error: Cannot read property 'getItem' of undefined #36828

Closed salahbm closed 1 year ago

salahbm commented 1 year ago

Description

I have been working on project which has several flatlists, which are causing problem suddenly. All flatlists that I have shows same issue dispite they were working previously. To add, auto refreshing also stopped working I dont know they are related to each other or not.

React Native Version

0.71.3

Output of npx react-native info

System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i3-10105 CPU @ 3.70GHz Memory: 5.21 GB / 15.87 GB Binaries: Node: 18.15.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 28, 31, 33 Build Tools: 28.0.3, 30.0.3, 31.0.0, 33.0.0 System Images: android-28 | Google APIs Intel x86 Atom, android-31 | Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86_64 Atom Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-213.7172.25.2113.9123335 Visual Studio: Not Found Languages: Java: 11.0.18 npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.3 => 0.71.3 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Steps to reproduce:

Open the project and navigate to the screen where the flatlists are being used. Observe that all the flatlists are not rendering and showing an error. Check the console for any error messages related to the flatlists. Look for the specific error message "Cannot read property 'getItem' of undefined". Verify that this error is being displayed for all the flatlists on the screen. Check if the code for the flatlists has been modified recently or if any libraries have been updated. Verify that the data source for the flatlists is correctly defined and passed as props. Make sure that the flatlist component is imported and rendered properly in the code. Check if any other component or library is conflicting with the flatlists. Provide any additional information that might be helpful for developers to identify and fix the issue. Expected outcome: The flatlists should render without any errors.

Actual outcome: The flatlists are not rendering and showing the error message "Cannot read property 'getItem' of undefined".

Snack, code example, screenshot, or link to a repository

// CODE IS GIVEN BELOW IS EXAMPLE WHICH WORKS ON BRAND NEW PROJECT BUT NOT IN THE CURRENTLY USED ONE

import React, {useState} from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, Platform, View, FlatList, } from 'react-native'; import {COLORS} from '../constants/theme'; const DATA = [ {id: '1', title: 'Item 1'}, {id: '2', title: 'Item 2'}, {id: '3', title: 'Item 3'}, {id: '4', title: 'Item 4'}, {id: '5', title: 'Item 5'}, {id: '6', title: 'Item 6'}, {id: '7', title: 'Item 7'}, ];

const Item = ({title}) => (

{title}

); const Settings = () => { const [selectedId, setSelectedId] = useState(null);

const renderItem = ({item}) => ;

return (

item.id} extraData={selectedId} />

); };

const styles = StyleSheet.create({ container: { flex: 1, marginTop: 50, }, item: { backgroundColor: COLORS.primary, padding: 5, borderRadius: 20, marginHorizontal: 5, height: 50, justifyContent: 'center', alignItems: 'center', }, title: { fontSize: 22, color: 'white', }, });

export default Settings;

cortinico commented 1 year ago

// CODE IS GIVEN BELOW IS EXAMPLE WHICH WORKS ON BRAND NEW PROJECT BUT NOT IN THE CURRENTLY USED ONE

We would need a reproducer to investigate this further sadly.

github-actions[bot] commented 1 year ago
:warning: Missing Reproducible Example
:information_source: It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.
chizhkov422 commented 1 year ago

Got the same error, only on android, any solution?

salahbm commented 1 year ago

r

not yet, been searching for a week already

salahbm commented 1 year ago

sue you are re

Hello, thanks for yout reply. Here I have created the sample repo which is exactly same as my project, but it is working on new project. LINK: github repository. Thanks

NickGerleman commented 1 year ago

This issue is not actionable without a repro or at least a callstack.

chizhkov422 commented 1 year ago

TypeError: Cannot read property 'getItem' of undefined

This error is located at: in FlatList (created by ChangeNetwork) in RNCSafeAreaView in Unknown (created by ChangeNetwork) in RCTView (created by View) in View (created by ChangeNetwork) in ChangeNetwork (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) in RCTView (created by View) in View (created by SceneView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackViewInner) in NativeStackViewInner (created by NativeStackView) in RCTView (created by View) in View (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by HomeNavigation) in HomeNavigation (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) in RCTView (created by View) in View (created by SceneView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackViewInner) in NativeStackViewInner (created by NativeStackView) in RCTView (created by View) in View (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by RootNavigation) in PortalProviderComponent (created by BottomSheetModalProviderWrapper) in BottomSheetModalProviderWrapper (created by RootNavigation) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by RootNavigation) in RNCSafeAreaView in Unknown (created by RootNavigation) in RootNavigation (created by App) in RCTView (created by View) in View (created by KeyboardAvoidingView) in KeyboardAvoidingView (created by App) in RCTView (created by View) in View (created by Pressable) in Pressable (created by Pressable) in SdkContextProvider (created by App) in PersistGate (created by App) in Provider (created by App) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by App) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in ChainGates(RootComponent), js engine: hermes

chizhkov422 commented 1 year ago
image image
chizhkov422 commented 1 year ago

Maybe this will help solve the problem

NickGerleman commented 1 year ago

So, the undefined bit here looks to be "this.props", which is derived directly from the input of the components constructor. https://github.com/facebook/react-native/blob/030ab8e0f19c57d1a07036ad89deef97c6eb39fe/Libraries/Lists/FlatList.js#L420

To continue figuring this out, I would attach a debugger to the FlatList constructor and follow the values. It seems very unlikely that this issue is in FlatList, but there could maybe be other environment factors.

chizhkov422 commented 1 year ago

<FlatList data={[]} renderItem={() => <></>} />

I tried using without the extra parameters in App.ts, but the problem remained. The error is only on Android, everything is fine with iOS.

chizhkov422 commented 1 year ago

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

salahbm commented 1 year ago

Yeah, I have tries this previously as well, but didnt help .... (((

salahbm commented 1 year ago

Thanks to @chizhkov422 I have checked my babel.config.jsone more time, and removerd

"plugins": ["@babel/plugin-proposal-class-properties"]

which made it work again. Thanks one more time

victorLee11 commented 1 year ago

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

good job

artemis-prime commented 1 year ago

Since this is a common enough plugin (as is class-properties), I think this should be better documented and possibly fixed in the RN codebase. Please re-open!

infoani92 commented 1 year ago

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

yes it's working when I remove I got another error while npm test

jest-runner/build/index.js: Class private methods are not enabled. Please add @babel/plugin-transform-private-methods to your configuration

Does anyone know how this will fix?

Roman-Hladilka commented 1 year ago

@infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

lavarajallu commented 1 year ago

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

Thank you @chizhkov422 you saved my time

xavcochran commented 1 year ago

Im still having the same issue. Adding this.props = props; under super(props); in the construction around L412-L420 in node_modules/react-native/Libraries/Lists/FlatList.js fixed the issue until I tried to use EAS to compile my app to put in on TestFlight.

ive removed the suggested parts of my babel.config.js above but the error still persits. Completely stuck!

mattgle commented 1 year ago

@infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

Im not sure if I'm following you, you mean to do this right?

Delete the following lines from babel.config.js

 '@babel/plugin-proposal-class-properties',
 '@babel/plugin-proposal-private-methods',

and then run

yarn add @babel/plugin-proposal-private-methods --dev
yarn add @babel/plugin-transform-flow-strip-types --dev
lavarajallu commented 1 year ago

nothing to add just remove

On Tue, Jun 13, 2023 at 1:46 AM mattgle.eth @.***> wrote:

@infoani92 https://github.com/infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

Im not sure if I'm following you, you mean to do this right?

Delete

@./plugin-proposal-class-properties', @./plugin-proposal-private-methods',

from babel.config.js and then run

yarn add @babel/plugin-proposal-private-methods --dev yarn add @babel/plugin-transform-flow-strip-types --dev

— Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/36828#issuecomment-1588027569, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4ZHHHF3NOAORINHVDDNFTXK52I7ANCNFSM6AAAAAAWVA6QMI . You are receiving this because you commented.Message ID: @.***>

-- Thanks Allu Lavaraju Sr. Software Engineer 9912661587

lavarajallu commented 1 year ago

Hii, In this plugins , nothing to add just remove what you add all plugins you remove

On Tue, Jun 13, 2023 at 6:39 AM Allu Lavaraju @.***> wrote:

nothing to add just remove

On Tue, Jun 13, 2023 at 1:46 AM mattgle.eth @.***> wrote:

@infoani92 https://github.com/infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

Im not sure if I'm following you, you mean to do this right?

Delete

@./plugin-proposal-class-properties', @./plugin-proposal-private-methods',

from babel.config.js and then run

yarn add @babel/plugin-proposal-private-methods --dev yarn add @babel/plugin-transform-flow-strip-types --dev

— Reply to this email directly, view it on GitHub < https://github.com/facebook/react-native/issues/36828#issuecomment-1588027569>,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AE4ZHHHF3NOAORINHVDDNFTXK52I7ANCNFSM6AAAAAAWVA6QMI>

. You are receiving this because you commented.Message ID: @.***>

-- Thanks Allu Lavaraju Sr. Software Engineer 9912661587

— Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/36828#issuecomment-1588351805, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4ZHHBZMM5WNCK7NTSOLZLXK64S3ANCNFSM6AAAAAAWVA6QMI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- Thanks Allu Lavaraju Sr. Software Engineer 9912661587

mattgle commented 1 year ago

Hii, In this plugins , nothing to add just remove what you add all plugins you remove On Tue, Jun 13, 2023 at 6:39 AM Allu Lavaraju @.> wrote: nothing to add just remove On Tue, Jun 13, 2023 at 1:46 AM mattgle.eth @.> wrote: > @infoani92 https://github.com/infoani92 instead of removing > @babel/plugin-proposal-private-methods you could install to devDependancies > and add in babel plugins before @babel/plugin-proposal-private-methods (it > is important) this plugin: @babel/plugin-transform-flow-strip-types. It > should help > > Im not sure if I'm following you, you mean to do this right? > > Delete > > @./plugin-proposal-class-properties', > @./plugin-proposal-private-methods', > > from babel.config.js > and then run > > yarn add @babel/plugin-proposal-private-methods --dev > yarn add @babel/plugin-transform-flow-strip-types --dev > > — > Reply to this email directly, view it on GitHub > < #36828 (comment)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AE4ZHHHF3NOAORINHVDDNFTXK52I7ANCNFSM6AAAAAAWVA6QMI> > . > You are receiving this because you commented.Message ID: > @.> > -- Thanks Allu Lavaraju Sr. Software Engineer 9912661587 — Reply to this email directly, view it on GitHub <#36828 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4ZHHBZMM5WNCK7NTSOLZLXK64S3ANCNFSM6AAAAAAWVA6QMI . You are receiving this because you are subscribed to this thread.Message ID: @.> -- Thanks Allu Lavaraju Sr. Software Engineer 9912661587

I need those plugins bro

Roman-Hladilka commented 1 year ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

xavcochran commented 1 year ago

The issue for me was using private methods in classes. For some reason, the combination of private class methods and the babel plugins to allow for the private class methods broke the react native flatlist.

changing this constructor in node_modules/react-native/Libraries/Lists/FlatList.js

constructor(props: Props<ItemT>) {
    super(props);
    this._checkProps(this.props);
    if (this.props.viewabilityConfigCallbackPairs) {
      this._virtualizedListPairs =
      // rest of code
}

to this (adding this.props = props;)

constructor(props: Props<ItemT>) {
    super(props);
    this.props = props;
    this._checkProps(this.props);
    if (this.props.viewabilityConfigCallbackPairs) {
      this._virtualizedListPairs =
      // rest of code
}

fixed the issue of being allowed private classes while using the following babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"],
    plugins: [
      "react-native-reanimated/plugin",
      "nativewind/babel",
      ["@babel/plugin-proposal-class-properties", { loose: true }],
      ["@babel/plugin-proposal-private-methods", { loose: true }],
      ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
      [
        "module-resolver",
        {
          root: ["."],
          alias: {
            "@app": "./",
          },
        },
      ],
    ],
  };
};

obviously when I had to remove the private classes and respective plugins from the babel config when compiling as EAS downloads the node modules and doesn't use the locally stored files. I don't know whether this is a bug that can be fixed or whether there is a reason this can't be changed

mphill commented 1 year ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

This works! Make sure you run:

npx react-native start --reset-cache

after making the changes

auliakbarh commented 1 year ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

this is the best answer, thanks @Roman-Hladilka

singh-kaustubh commented 1 year ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

This saved me a lot of time, you have described this very accurately, also to add do remember to clear the cache once while starting this by : yarn start -- --reset-cache

LuanMiranda77 commented 1 year ago 
 this.props = props;

I solved it, following this step by adding the props in the constructor alterando este construtor emnode_modules/react-native/Libraries/Lists/FlatList.js

constructor(props: Props) { super(props); this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code } para isso (adicionando this.props = props;)

constructor(props: Props) { super(props); this.props = props; this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code }

kodzonko commented 1 year ago

For me this helped: https://stackoverflow.com/a/76994931

Unfortunately, it's only a workaround not a solution as it ivolves modifying node_modules contents.

linonetwo commented 1 year ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

Thanks, this works for expo:

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-transform-flow-strip-types', ['@babel/plugin-transform-private-methods', { loose: true }]],
  };
};

then

npx expo start -c
aaronzyf commented 1 year ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

cool , it's works for me

ayushkumarbhadani-sameta commented 10 months ago

Guys, I'm also getting this same issue in the Flatlist from today morning. I tried rolling back my project to few days back and deleted the node-modules, .expo directory and package-lock.json and did an npm cache clean --force before npm i again but the problem didn't solved.

Here is what it looks like:

Here is what my rolled back version of babel.config.js looks like:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
      'nativewind/babel',
      'react-native-reanimated/plugin',
    ],
  };
};

Here is what my package.json looks like:

{
  "name": "project-name",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^49.0.16",
    "expo-checkbox": "~2.4.0",
    "expo-clipboard": "~4.3.1",
    "expo-constants": "^14.4.2",
    "expo-document-picker": "~11.5.4",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.10",
    "expo-status-bar": "~1.6.0",
    "formik": "^2.4.5",
    "nativewind": "^2.0.11",
    "react": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-root-toast": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^10.0.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@tailwindcss/typography": "^0.5.10",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.7",
    "@types/react": "^18.2.34",
    "@types/react-native-vector-icons": "^6.4.16",
    "@types/react-test-renderer": "^18.0.5",
    "tailwindcss": "3.3.2",
    "typescript": "^5.2.2"
  },
  "private": true
}

Please note that, this error was not there before when I committed these changes.

Can anyone please help me out.

ayushkumarbhadani-sameta commented 10 months ago

Guys, I'm also getting this same issue in the Flatlist from today morning. I tried rolling back my project to few days back and deleted the node-modules, .expo directory and package-lock.json and did an npm cache clean --force before npm i again but the problem didn't solved.

Here is what it looks like:

Here is what my rolled back version of babel.config.js looks like:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
      'nativewind/babel',
      'react-native-reanimated/plugin',
    ],
  };
};

Here is what my package.json looks like:

{
  "name": "project-name",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^49.0.16",
    "expo-checkbox": "~2.4.0",
    "expo-clipboard": "~4.3.1",
    "expo-constants": "^14.4.2",
    "expo-document-picker": "~11.5.4",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.10",
    "expo-status-bar": "~1.6.0",
    "formik": "^2.4.5",
    "nativewind": "^2.0.11",
    "react": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-root-toast": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^10.0.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@tailwindcss/typography": "^0.5.10",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.7",
    "@types/react": "^18.2.34",
    "@types/react-native-vector-icons": "^6.4.16",
    "@types/react-test-renderer": "^18.0.5",
    "tailwindcss": "3.3.2",
    "typescript": "^5.2.2"
  },
  "private": true
}

Please note that, this error was not there before when I committed these changes.

Can anyone please help me out.

Guys, I solved this issue. It was just expo catch that was giving problem. I used npx expo . -c on the root of the project.

aamirbinabd commented 10 months ago

Guys, I'm also getting this same issue in the Flatlist from today morning. I tried rolling back my project to few days back and deleted the node-modules, .expo directory and package-lock.json and did an npm cache clean --force before npm i again but the problem didn't solved. Here is what it looks like: Here is what my rolled back version of babel.config.js looks like:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
      'nativewind/babel',
      'react-native-reanimated/plugin',
    ],
  };
};

Here is what my package.json looks like:

{
  "name": "project-name",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^49.0.16",
    "expo-checkbox": "~2.4.0",
    "expo-clipboard": "~4.3.1",
    "expo-constants": "^14.4.2",
    "expo-document-picker": "~11.5.4",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-router": "^2.0.10",
    "expo-status-bar": "~1.6.0",
    "formik": "^2.4.5",
    "nativewind": "^2.0.11",
    "react": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-root-toast": "^3.5.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^10.0.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@tailwindcss/typography": "^0.5.10",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.7",
    "@types/react": "^18.2.34",
    "@types/react-native-vector-icons": "^6.4.16",
    "@types/react-test-renderer": "^18.0.5",
    "tailwindcss": "3.3.2",
    "typescript": "^5.2.2"
  },
  "private": true
}

Please note that, this error was not there before when I committed these changes. Can anyone please help me out.

Guys, I solved this issue. It was just expo catch that was giving problem. I used npx expo . -c on the root of the project.

This helped me as well. Ran npx expo . -c and the error was gone.

ctapang commented 8 months ago

This shouldn't have been closed. The bug is still there. I agree with 0xFadedd: https://github.com/facebook/react-native/issues/36828#issuecomment-1589555539

The local object this.props is not initialized. The fix is simply to initialize it as 0xFadedd lucidly explained last year.

ctapang commented 8 months ago

This is another comment with the same simple fix as proposed by 0xFadedd : https://github.com/facebook/react-native/issues/36828#issuecomment-1691595909

abpbackup commented 7 months ago

@infoani92 instead of removing @babel/plugin-proposal-private-methods you could install to devDependancies and add in babel plugins before @babel/plugin-proposal-private-methods (it is important) this plugin: @babel/plugin-transform-flow-strip-types. It should help

This worked for me and didn't break the tests

sovetski commented 7 months ago

I have the same issue here, not resolved by others suggestions

Kyle772 commented 7 months ago 
 this.props = props;

I solved it, following this step by adding the props in the constructor alterando este construtor emnode_modules/react-native/Libraries/Lists/FlatList.js

constructor(props: Props) { super(props); this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code } para isso (adicionando this.props = props;)

constructor(props: Props) { super(props); this.props = props; this._checkProps(this.props); if (this.props.viewabilityConfigCallbackPairs) { this._virtualizedListPairs = // rest of code }

This fixed my problem after trying many of the other suggestions. Thank you

zainkhas commented 6 months ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

Thanks, this works for expo:

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['@babel/plugin-transform-flow-strip-types', ['@babel/plugin-transform-private-methods', { loose: true }]],
  };
};

then

npx expo start -c

Thank you. This worked for me too in expo.

aryan127 commented 5 months ago

@mattgle I meant that you don't need nothing to remove from babel.config.js, as '@babel/plugin-proposal-private-methods' is needed by jest. You need to install @babel/plugin-transform-flow-strip-types yarn add -D @babel/plugin-transform-flow-strip-types or npm install @babel/plugin-transform-flow-strip-types --save-dev and add it to babel.config.js before @babel/plugin-proposal-private-methods and other plugins. So your babel.config.js plugins will look like this plugins: [ ..... '@babel/plugin-transform-flow-strip-types', '@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-private-methods', ..... ],

Broo just thank you, you just save me you absolute genius person. Thank you brother have a great day.

JoaoPauloXD commented 3 months ago

I found the problem. After removing this code from babel.config.js and removing @babel/plugin-proposal-private-methods, everything is fine. [ '@babel/plugin-proposal-private-methods', { loose: true, }, ],

thanks, man, I remove these lines of my babel.config.js:

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

HoaiHuynh commented 3 months ago

By removing @babel/plugin-transform-private-methods, I solved this bug, but it created another bug when I ran test