Async-storage: After including Async Storage, react native build fails

[dmrajiv]

Current behavior

In react Native Project, before Async Storage, the build compiles successfully.
After including the Async Storage, the react native build fails.

Expected behavior

With Async Storage, the React Native build should compile successfully.

Repro steps

Create a React native project
With some basic View Rendering compile it, it should compile successfully
Now, import Async Storage in the code & now the build should fail

Environment

• Async Storage version: 1.9.0
• React-Native version: 0.62.2
• Platform tested: Android
• Logs/Error that are relevant:

#

Build Error Logs

#

D:\reactnative\MyTestApp>npm run android-windows

[email protected] android-windows D:\reactnative\MyTestApp
react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android

             Welcome to React Native!
            Learn once, write anywhere

info Writing bundle output to:, android/app/src/main/assets/index.android.bundle
info Done writing bundle output
info Copying 12 asset files
info Done copying assets
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1166 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Installing the app...

Task :app:mergeDexDebug FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.3/userguide/command_line_interface.html#sec:command_line_warnings
155 actionable tasks: 7 executed, 148 up-to-date

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:mergeDexDebug'.

  Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
  Failed to transform full.jar (project :react-native-community_async-storage) to match attributes {artifactType=android-dex, com.android.build.api.attributes.BuildTypeAttr=debug, com.android.build.api.attributes.VariantAttr=debug, com.android.build.gradle.internal.dependency.AndroidTypeAttr=Aar, dexing-enable-desugaring=true, dexing-is-debuggable=true, dexing-min-sdk=16, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}.
  Execution failed for DexingWithClasspathTransform: D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build\intermediates\full_jar\debug\createFullJarDebug\full.jar.
  java.io.IOException: Unable to delete directory 'D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build.transforms\545d63fb41417ef2ad382f109bad4810'
  Failed to delete some children. This might happen because a process has files open or has its working directory set in the target directory.
  - D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build.transforms\545d63fb41417ef2ad382f109bad4810\full

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 11s

error Failed to install the app. Make sure you have the Android development environment
set up: https://reactnative.dev/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:mergeDexDebug'.

  Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
  Failed to transform full.jar (project :react-native-community_async-storage) to match attributes {artifactType=android-dex, com.android.build.api.attributes.BuildTypeAttr=debug, com.android.build.api.attributes.VariantAttr=debug, com.android.build.gradle.internal.dependency.AndroidTypeAttr=Aar, dexing-enable-desugaring=true, dexing-is-debuggable=true, dexing-min-sdk=16, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}.
  Execution failed for DexingWithClasspathTransform: D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build\intermediates\full_jar\debug\createFullJarDebug\full.jar.
  java.io.IOException: Unable to delete directory 'D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build.transforms\545d63fb41417ef2ad382f109bad4810'
  Failed to delete some children. This might happen because a process has files open or has its working directory set in the target directory.
  - D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build.transforms\545d63fb41417ef2ad382f109bad4810\full

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 11s

at makeError (D:\reactnative\MyTestApp\node_modules\execa\index.js:174:9)
at D:\reactnative\MyTestApp\node_modules\execa\index.js:278:16
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async runOnAllDevices (D:\reactnative\MyTestApp\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:5)
at async Command.handleAction (D:\reactnative\MyTestApp\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:186:9)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] android-windows: react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] android-windows script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache_logs\2020-04-20T23_41_00_595Z-debug.log

#

Cleanup Error Logs

#

D:\reactnative\MyTestApp\android>gradlew.bat clean
Starting a Gradle Daemon (subsequent builds will be faster)

Task :react-native-community_async-storage:clean FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-community_async-storage:clean'.

  java.io.IOException: Unable to delete file 'D:\reactnative\MyTestApp\node_modules\@react-native-community\async-storage\android\build'

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.3/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 27s
2 actionable tasks: 2 executed

[Krizzu]

Hi,

Enable multi-dex support in your project for app (in android/app/build.gradle):

android {
    defaultConfig {
        ...
+        multiDexEnabled true
    }
    ...
}

[dmrajiv]

Hi Krizzu,

Thanks for your prompt reply.
Addition of above multi-dex support helps in getting the build successful.
But the compilation logs still show the following string:
"
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
"
Moreover, the Async Storage function seems to not working (am neither getting any state changes through it nor it is displaying any console logs.
The code which I used is as follows:

componentDidMount(){
getData = async () => {
console.log('hello');
try {
const vuserToken = await AsyncStorage.getItem(STORAGE_KEY);
if (vuserToken !== '555') {
this.setState({isLoading:false});
this.setState({userToken: vuserToken});
console.log(vuserToken);
//this.setSt
}
console.log('token is null');
} catch (error) {
console.log('error : '+error);
}
};
}

Although it is not directly linked with the above issue of compilation, it is imperatively linked due to this being the primary reason for using Async Storage.

Thanks
Rajiv

[dmrajiv]

Meanwhile I saw the following url for manual linking and executed the steps
https://github.com/react-native-community/async-storage/blob/master/docs/Linking.md#android

After manual linking, build is still successful, but on emulator the error is coming as per the below snapshot

[Krizzu]

@dmrajiv
You don't have to link it manually if you're working with RN 0.60+. First code would work if you'd actually call the function you've defined.

componentDidMount(){
  getData = async () => {
    // your code here
  };
+  getData();
}

[dmrajiv]

Hi Krizzu,

Realizing this, I have reverted the manual linking changes.
And I have understood from your comment above that the call was missing & hence the action was also missing.
I have done appropriate changes & now the asyncstorage is working and I have tested that state is also preserved. Thank You for your valuable points. It really helped & reduced the debug time considerably.

You can mark this issue as closed.

kind Regards,
Rajeev Mehta

[dmrajiv]

The problematic issue is resolved with the given versions by the resolution provided by Mr. Krizzu & hence it needs to be marked closed. I thank Mr. Krizzu for the help & correct pointers.