react-native: TypeError: Cannot read property 'getItem' of undefined

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I’m creating a new react-native project and when running it I’m getting the above error. The full error is:

TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (at YellowBoxList.js:87)
    in RCTView (at YellowBoxList.js:79)
    in YellowBoxList (at YellowBoxContainer.js:36)
    in YellowBoxContainer (at YellowBox.js:147)
    in YellowBox (at AppContainer.js:104)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

Also, in my cmd I’m getting this error, related to the debugger:

None of these files exist:
  * debugger-ui\debuggerWorker.cff11639.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui\debuggerWorker.cff11639.js\index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (C:\Presto\haveri\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (C:\Presto\haveri\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Presto\haveri\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at C:\Presto\haveri\node_modules\metro\src\lib\transformHelpers.js:267:42
    at Server.<anonymous> (C:\Presto\haveri\node_modules\metro\src\Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Presto\haveri\node_modules\metro\src\Server.js:99:24)
    at _next (C:\Presto\haveri\node_modules\metro\src\Server.js:119:9)

I’m using windows 10. I understand that it might be related to my system because usually people init a new react-native app and it’s wokring. But I cannot figure out what’s the problem and why it responds like that. If you have a direction on what should I do I’d be glad to try anything, just a few days ago it worked fine and seems like it’s out of the blue.

Thanks a lot in advance

React Native version:

0.62.2

Steps To Reproduce

react-native init newProject react-native run-android

Expected Results

Describe what you expected to happen.

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

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 8
Comments: 22 (2 by maintainers)

Commits related to this issue

Fix: fix FlatList rendering error - https://github.com/facebook/react-native/issues/29084 — committed to newfarms/react-native-mapbox-geometry-editor by bllanos 2 years ago

Most upvoted comments

Had the same issue.

Just remove:

     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-flow-strip-types": "^7.10.4",

from devDependencies

and

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

from babel.config.js

Now build new.

+24

kwoxer on Jul 18, 2020

@kwoxer I actually need the @babel/plugin-proposal-class-properties as I’m using the @babel/plugin-proposal-decorators. Is there another solution to this issue?

+16

avinashlng1080 on Jan 4, 2021

Hello, gentlemen! I found a solution for the root cause. You don’t need to remove or install babel plugins. Just do what is said in – babel/babel#8417 (comment)

Add “class properties” plugin in the list (there are all in – module:metro-react-native-babel-preset but in different order), if you didn’t already.
"plugins": [
      "@babel/plugin-transform-flow-strip-types",
      "@babel/plugin-proposal-class-properties",
      ...
],

Adding @babel/plugin-transform-flow-strip-types to babel plugins solved the issue for us. Note that we already had @babel/plugin-proposal-class-properties in babel plugins.

+15

diatche on Jun 6, 2022

Hello, gentlemen! I found a solution for the root cause. You don’t need to remove or install babel plugins. Just do what is said in – https://github.com/babel/babel/issues/8417#issuecomment-430007587

Add “class properties” plugin in the list (there are all in – module:metro-react-native-babel-preset but in different order), if you didn’t already.

"plugins": [
      "@babel/plugin-transform-flow-strip-types",
      "@babel/plugin-proposal-class-properties",
      ...
],

+13

Dimous on Feb 6, 2022

@avinashlng1080 : Please try with import FlatList from ‘react-native-gesture-handler’.

Krunal-K-SimformSolutions on Jun 4, 2021

I had the same issue on react-native 0.64.3. I solved this issue by remove Related libraries for babel from babel.config.

['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],

itchii-06 on Jan 23, 2022

to apply certain plugins / presets only on react-native or any other library, use the “overrides” and “include/exclude” babel configs:

// (\\{1,2}|\/) - it turns out that windows uses both \ and \\ as the path separators, and mac uses /
const reactNativePathRegex =
  /node_modules(\\{1,2}|\/)(@react-native|react-native)/;


// ...
    plugins: [
      '@babel/plugin-transform-modules-commonjs',
      // ... other plugins
    ],
    overrides: [
      // only apply to `node_modules/react-native` and `node_modules/@react-native`
      // I needed this because of https://github.com/facebook/jest/issues/8627#issuecomment-1376064713
      // but this might not apply in your case
      {
        include: [reactNativePathRegex],
        presets: [
          'module:metro-react-native-babel-preset',
        ],
      },
      {
        // apply to everything besides `node_modules/react-native` and `node_modules/@react-native`
        exclude: [reactNativePathRegex],
        plugins: [
          ['@babel/plugin-proposal-class-properties', {loose: true}],
          ['@babel/plugin-proposal-private-methods', {loose: true}],
          // other plugins that doesn't play nicely with react-native
        ],
// ...

vzaidman on Jan 18, 2023

Also worked for me, using ethers 6.1 required private class properties and it broke flatlist. My current babel.config:

plugins = [
    ["@babel/plugin-transform-flow-strip-types", { loose: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    ["@babel/plugin-proposal-private-methods", { loose: true }],
    ['module-resolver', {
      root: ['./'],
      alias: {
        /**
         * Regular expression is used to match all files inside `./src` directory and map each `.src/folder/[..]` to `~folder/[..]` path
         */
        '^~(.+)': './src/\\1',
        'crypto': 'react-native-quick-crypto',
        'stream': 'stream-browserify',
        'buffer': '@craftzdog/react-native-buffer',
        'assert': 'assert',
        // ethers lib calling net module
        'net': 'react-native-tcp-socket',
        'http': 'http-browserify',
        'https': 'https-browserify',
        'zlib': 'zlib-browserify',
      }
    }]]

devYonz on Mar 10, 2023

Hello, gentlemen! I found a solution for the root cause. You don’t need to remove or install babel plugins. Just do what is said in – babel/babel#8417 (comment) Add “class properties” plugin in the list (there are all in – module:metro-react-native-babel-preset but in different order), if you didn’t already.
"plugins": [
      "@babel/plugin-transform-flow-strip-types",
      "@babel/plugin-proposal-class-properties",
      ...
],
Adding @babel/plugin-transform-flow-strip-types to babel plugins solved the issue for us. Note that we already had @babel/plugin-proposal-class-properties in babel plugins.

Hi, I was having the same problem, needed to use the decorators for Mobx, adding @babel/plugin-transform-flow-strip-types just saved my day…

mtzfactory on May 24, 2023

Hello, gentlemen! I found a solution for the root cause. You don’t need to remove or install babel plugins. Just do what is said in – babel/babel#8417 (comment) Add “class properties” plugin in the list (there are all in – module:metro-react-native-babel-preset but in different order), if you didn’t already.
"plugins": [
      "@babel/plugin-transform-flow-strip-types",
      "@babel/plugin-proposal-class-properties",
      ...
],
Adding @babel/plugin-transform-flow-strip-types to babel plugins solved the issue for us. Note that we already had @babel/plugin-proposal-class-properties in babel plugins.
thanks its working

Yea this works if you want to add 'module:metro-react-native-babel-preset', to the whole project.

But in some cases you don’t want to add it in the root of the monorepo because you also transpile non react-native code in other packages of the monorepo. In that case, use overrides like I did in the comment above.

vzaidman on Jan 12, 2023

@diatche 's solution just saved me a bunch of frustration in an Expo 46 / RN 0.69.6 project. Thanks!

mcavaliere on Oct 29, 2022