TypeError: Cannot read property 'getItem' of undefined

[omerfaran]

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

[github-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[chrisglein]

Quick search pulled up this. Check your dependencies?

[kwoxer]

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.

[avinashlng1080]

@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?

[Krunal-K-SimformSolutions]

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

[woowalker]

any solution?

[LuigiMaestrelli]

This issue is still happening on react-native 0.64.2. I cannot remove the plugins from babel.config because it will break other things, like typerom migatrions.

Any other suggestions or news about this?

[itchii-06]

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 }],

[Dimous]

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",
      ...
],

[Fandy16]

I also experienced the same case where the getItem function was not recognized. Previously I've changed the library from @react-native-community/async-storage to @react-native-async-storage/async-storage. But is that the reason?

[diatche]

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.

[mcavaliere]

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

[vzaidman]

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
        ],
// ...

[ahmedyounes]

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

[vzaidman]

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.

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[devYonz]

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',
      }
    }]]

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[abanoub2amin]

It solved with me after downgrading react-native-svg-transformer version to

"react-native-svg-transformer": "^0.14.3",

[mtzfactory]

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

[kodzonko]

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.