YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem') #21154

Yria · 2018-09-17T16:11:20Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
Memory: 3.81 GB / 24.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2
API Levels: 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.14 => 16.4.14
@types/react-native: ^0.56.19 => 0.56.19
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-asset: 1.1.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

With warning boxes in starting, the app pops up with red error page with Flatlist's props checking error.

Unhandled JS Exception: TypeError: Cannot read property 'getItem' of undefined

This error is located at:
in FlatList (at YellowBoxList.js:87)
in RCTView (at View.js:44)
in YellowBoxList (at YellowBox.js:104)
in YellowBox (at AppContainer.js:93)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

Reproducible Demo

app_react.zip

react-native-bot · 2018-09-17T17:05:10Z

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

tomleader · 2018-09-19T02:55:58Z

0.57 ，same error occur

akmalahmed525 · 2018-09-23T20:02:46Z

I'm getting the same error. has anyone found the solution to resolve this issue?

KeonPaul · 2018-09-24T00:50:21Z

Similar issue with

 React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-4600U CPU @ 2.10GHz
      Memory: 1.03 GB / 7.90 GB
    Binaries:
      Yarn: 1.3.2 - C:\Users\MIC_Laptop3\scoop\persist\nodejs\bin\yarn.CMD
      npm: 6.2.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.1.0.0 AI-173.4907809

and
"react-native": "0.57.1",

right now I usually run the application in Debug Js Remotely active which transfer to the YellowBox warning to the React-Native debugger or I use
console.disableYellowBox = true;
to disable it entirely which defeats the purpose of YellowBox as a debug tool.

mikemorris · 2018-09-26T00:45:11Z

I wasn't able to track down the exact cause, but I was seeing this issue (as well as #20405) when using react-native-git-upgrade to upgrade from 0.55.4 to 0.57.0, but upgrading manually (react-native init in a new project, manually copying files over, then reinstalling dependencies) resolved both issues. My best guess is that both issues could possibly be related to Babel 6/7 conflicts from when upgrading?

john-hu · 2018-09-26T13:35:06Z

got the same error +1

john-hu · 2018-09-26T15:44:21Z

@mikemorris This is a nice catch. I use the following at my babelrc file.

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ]
}

alexisbronchart · 2018-09-28T13:22:22Z

I also had this issue. Apparently "@babel/plugin-proposal-class-properties" has a bug and since I didn't really need it, I just removed it from my babelrc.

gglee89 · 2018-10-15T05:05:14Z

This same error occurred with me.

I'm currently in react-native v0.57

And after three attempts, what worked for me was running these following commands (the old "bread-and-butter" way):

rm -rf node_modules && npm i
react-native run-android
react-native start --reset-cache

In my case, I faced this issue after I included new libraries using npm.
These commands are recommended by metro bundler but annoyingly, it might often not fix the error.
You might also try to execute the command watchman watch-del-all to remove all watches and triggers for new file changes.

Unfortunately it isn't an easy to grasp flow for why my build failed, and why it suddenly worked after three attempts resetting the configuration. This might not work for you as well, I'm giving it out as a "possible solution" that might help you out, as it was annoying for me.

canastro · 2018-11-01T16:06:47Z

I'm facing this same issue with 0.57.4. Tried what @gglee89 suggested and still no luck.
Removing "@babel/plugin-proposal-class-properties" solved it for me

youngjuning · 2018-11-02T14:48:29Z

0.57.4 Is there any solution

thodubois · 2018-11-14T14:41:41Z

Still there in 0.57.5. Try a react-native init and add a console.warn('Hello Warn') in App.js. The error pop on android devices after react-native run-android.

ashleyrudland · 2018-11-16T10:21:11Z

After 3 days lost of this BS - removing @babel/plugin-proposal-class-properties from .babelrc/babel.config.js and running react-native start --reset-cache fixed it for me. (cc: @youngjuning @thodubois)

vongohren · 2018-11-20T08:49:29Z

Im stuggeling with this now, but dont have any plugin proposal class properties in any of my files.
Are there any other solutions? Iv tried newest 0.57 and 0.56

vongohren · 2018-11-21T18:52:59Z

This was a fix that solved it for me. I dont like it but works for now.
#15902 (comment)

harvey-woo · 2018-12-16T10:51:10Z

update js core for android and remove @babel/plugin-proposal-class-properties, it's seem no need to add this plugin for latest jsc
https://github.com/react-community/jsc-android-buildscripts

ColinRyan · 2019-01-01T20:19:15Z

I ran into this trouble as well while upgrading expo to version 31. It's become resolved after I updated react-native-scripts to version 2 and changed the main field in package.json to ./node_modules/expo/AppEntry.js. I'm also using babel-preset-expo@5 as my devDependency instead of any other babel dependency.

hramos · 2019-02-11T17:47:19Z

The JSC in Android was updated in December, it's in master. The new JSC will be part of the 0.59 release.

Robert2333 · 2019-03-24T09:49:50Z

mobx babel-plugin also will make this mistake!

robbiemu · 2019-03-29T11:03:08Z

in addition to canastro's resolution, the one in the link tot he babel discussion of the bug lists another: put @babel/plugin-transform-flow-strip-types before @babel/plugin-proposal-class-properties .. this worked for me

filipencus · 2019-04-10T21:55:32Z

My initial configuration was:
RN 0.59
MobX
Sqlite storage
React Navigation
Babel 7

I spent two days trying to solve the issue. What finally worked was:
npx babel-upgrade --write
close and open all terminals
delete the previous app and install again
react-native start --reset-cache

added the key id to the mapper
{[1,2,3].map(item => ( <View key={item}><Text>{item}</Text></View> ))}

I didn't know that was necessary that key identifier on RN also .
I have discovered the error while debugging from Chrome console.

Hope this help someone.

Final package.json config

"dependencies": {
"@react-native-community/async-storage": "^1.2.1",
"core-decorators": "^0.20.0",
"mobx": "4.9.2",
"mobx-react": "5.4.3",
"react": "16.8.3",
"react-native": "0.59.1",
"react-native-sqlite-storage": "3.3.10",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "2.18.3"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/runtime": "^7.4.0",
"@types/react-native-sqlite-storage": "^3.3.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-preset-mobx": "2.0.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3",
"@babel/preset-flow": "^7.0.0"
},
"jest": {
"preset": "react-native"
}

timomeara · 2019-04-11T20:14:20Z

i'm getting this error, not on yellowbox, but in a FlatList in a component.
not even the min example provided by fb works:
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

this showed up after some changes to my build, first in IOS and now in android.
i fixed IOS by starting a new RNCA and bringing my stuff in bit-by-bit.
now android is broken :/

the last thing i added to my project is:
https://github.com/react-native-community/react-native-webview
but i'm really not sure if this is the cause

filipencus · 2019-04-11T20:21:43Z

i'm getting this error, not on yellowbox, but in a FlatList in a component.
not even the min example provided by fb works:
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

this showed up after some changes to my build, first in IOS and now in android.
i fixed IOS by starting a new RNCA and bringing my stuff in bit-by-bit.
now android is broken :/

the last thing i added to my project is:
https://github.com/react-native-community/react-native-webview
but i'm really not sure if this is the cause

My case was similar, and the problem was that somehow, the babel dependencies, version and babel.config was not correct. As I posted, I had to upgrade babel again and worked out.

I spend days trying to solve it. Some RN versions are very....

phyzical · 2019-07-08T10:18:24Z

THANKS.

updating babel config removed this issue for me.
as other said dont forgot to update the babel js config (not .rc) if you have already migrated

coocon · 2019-07-18T03:46:04Z

Thanks.
There is a change for me to solve this problem by package.json

"start": "node node_modules/react-native/local-cli/cli.js start"
to
"start": "react-native start",

LuisRodriguezLD · 2019-07-23T04:07:07Z

I just want to add something,

This fails:

"plugins": [
    [
        "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
    ]
]

but this works:

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

rkingon · 2019-10-24T23:09:19Z

@robbiemu I don't know how you figured it out, but adding @babel/plugin-transform-flow-strip-types was a life saver!

For others encountering this issue, I believe thus far -- this is the best solution (vs removing loose).

paulosborne · 2020-02-10T12:52:48Z

After 3 days lost of this BS - removing @babel/plugin-proposal-class-properties from .babelrc/babel.config.js and running react-native start --reset-cache fixed it for me. (cc: @youngjuning @thodubois)

react-native start --reset-cache worked for me!

react-native-bot added the ⏪Old Version label Sep 17, 2018

john-hu mentioned this issue Oct 18, 2018

fetch API doesn't resolve or reject #20405

Closed

3 tasks

react-native-bot removed the ⏪Old Version label Dec 16, 2018

react-native-bot added the Bug Report label Jan 26, 2019

hramos removed the Bug Report label Feb 6, 2019

hramos closed this as completed Feb 11, 2019

matheusgrieger mentioned this issue Mar 28, 2019

React Native: null is not an object (NativeModules[SQLite][method]) typeorm/typeorm#3915

Closed

timomeara mentioned this issue Apr 11, 2019

FlatList TypeError: undefined is not an object (evaluating 'props.getItem') #24421

Closed

react-native-bot added the Bug label May 4, 2019

facebook locked as resolved and limited conversation to collaborators Feb 11, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem') #21154

YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem') #21154

Yria commented Sep 17, 2018 •

edited

Loading

react-native-bot commented Sep 17, 2018

tomleader commented Sep 19, 2018

akmalahmed525 commented Sep 23, 2018

KeonPaul commented Sep 24, 2018 •

edited

Loading

mikemorris commented Sep 26, 2018

john-hu commented Sep 26, 2018

john-hu commented Sep 26, 2018

alexisbronchart commented Sep 28, 2018

gglee89 commented Oct 15, 2018 •

edited

Loading

canastro commented Nov 1, 2018 •

edited

Loading

youngjuning commented Nov 2, 2018

thodubois commented Nov 14, 2018 •

edited

Loading

ashleyrudland commented Nov 16, 2018 •

edited

Loading

vongohren commented Nov 20, 2018

vongohren commented Nov 21, 2018

harvey-woo commented Dec 16, 2018

ColinRyan commented Jan 1, 2019

hramos commented Feb 11, 2019

Robert2333 commented Mar 24, 2019

robbiemu commented Mar 29, 2019

filipencus commented Apr 10, 2019 •

edited

Loading

timomeara commented Apr 11, 2019

filipencus commented Apr 11, 2019

phyzical commented Jul 8, 2019

coocon commented Jul 18, 2019

LuisRodriguezLD commented Jul 23, 2019

rkingon commented Oct 24, 2019

paulosborne commented Feb 10, 2020

YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem') #21154

YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem') #21154

Comments

Yria commented Sep 17, 2018 • edited Loading

Environment

Description

Reproducible Demo

react-native-bot commented Sep 17, 2018

tomleader commented Sep 19, 2018

akmalahmed525 commented Sep 23, 2018

KeonPaul commented Sep 24, 2018 • edited Loading

mikemorris commented Sep 26, 2018

john-hu commented Sep 26, 2018

john-hu commented Sep 26, 2018

alexisbronchart commented Sep 28, 2018

gglee89 commented Oct 15, 2018 • edited Loading

canastro commented Nov 1, 2018 • edited Loading

youngjuning commented Nov 2, 2018

thodubois commented Nov 14, 2018 • edited Loading

ashleyrudland commented Nov 16, 2018 • edited Loading

vongohren commented Nov 20, 2018

vongohren commented Nov 21, 2018

harvey-woo commented Dec 16, 2018

ColinRyan commented Jan 1, 2019

hramos commented Feb 11, 2019

Robert2333 commented Mar 24, 2019

robbiemu commented Mar 29, 2019

filipencus commented Apr 10, 2019 • edited Loading

timomeara commented Apr 11, 2019

filipencus commented Apr 11, 2019

phyzical commented Jul 8, 2019

coocon commented Jul 18, 2019

LuisRodriguezLD commented Jul 23, 2019

rkingon commented Oct 24, 2019

paulosborne commented Feb 10, 2020

Yria commented Sep 17, 2018 •

edited

Loading

KeonPaul commented Sep 24, 2018 •

edited

Loading

gglee89 commented Oct 15, 2018 •

edited

Loading

canastro commented Nov 1, 2018 •

edited

Loading

thodubois commented Nov 14, 2018 •

edited

Loading

ashleyrudland commented Nov 16, 2018 •

edited

Loading

filipencus commented Apr 10, 2019 •

edited

Loading