`inlineRequires: true` breaks AsyncStorage

[EricWiener]

Do you want to request a feature or report a bug? Bug

What is the current behavior? Unable to retrieve values with getItem

When using the following code:

import AsyncStorage from '@react-native-async-storage/async-storage';

  let storageKey = 'persist:root';
  console.log("Getting stored state", storageKey);
  (async () => {
    console.log('about to call async');
    try {
      let res = await AsyncStorage.getItem('persist:root');
      console.log("res", res);
    } catch(e) {
      // error reading value
      console.log(e);
    }
  })();

  console.log("passed here");
  AsyncStorage.getAllKeys((err, keys) => {
    AsyncStorage.multiGet(keys, (error, stores) => {
      stores.map((result, i, store) => {
        console.log({ [store[i][0]]: store[i][1] });
        return true;
      });
    });
  });

The top chunk never prints out an error or a result. I just get:

Getting stored state persist:root
about to call async
passed here

It just continues onto the bottom chunk where it correctly prints values:

{"persist:root": ...}

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. Will try to get this later

What is the expected behavior? The item should be returned when using await AsyncStorage.getItem('persist:root')

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system. Relevant yarn.lock:

metro "^0.58.0"
metro-config "^0.58.0"
metro-core "^0.58.0"
metro-react-native-babel-transformer "^0.58.0"
metro-resolver "^0.58.0"

metro.config.js:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },

• Platforms tested:
  • [ ] Android
  • [x] iOS
  • [ ] macOS
  • [ ] Windows
• AsyncStorage version: ^1.15.4
• Environment:

System:
    OS: macOS 11.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 24.73 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.3.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[sohjcgcg]

We have the same issue, we can't update to react-native 0.64 since libraries like async-storage would stop working unless we set inlineRequires: false, which then makes other problems on our Android setup

[christophemenager]

I have the same issue, took me a pretty long time to detect that the issue was coming from the inline-require

[leobHumi]

Just to add on this issue, I experienced the same problem as originally described here, trying to use getItem from AsyncStorage. Not sure what was happening, I kept digging until I realized that async/await was not working. Every command with await would just hang up indefinitely.

Something as simple as this doesn't work:

const x = await Promise.resolve(5);
console.log({ x });

while Promise.resolve(5).then(console.log); works as intended.

Changing inlineRequires: false solves the issue as others pointed out, but this is not ideal on the long run for the project.

My current project is using:

metro: ^0.66.1
metro-config: ^0.66.1
metro-core: ^0.66.1
metro-react-native-babel-transformer: ^0.66.1
metro-resolver: ^0.66.1
metro-runtime: ^0.66.1