Showing module not found error i.e. 'Unable to resolve module @react-native-community/async-storage' even if the module is installed

Question

I have installed the '@react-native-community/async-storage' module from the official documentation and trying to run the app on the Android emulator but the app breaks down giving "module not found" error.

This is my App.js file where I am importing the Async Storage module.

import React, {useState, useEffect} from 'react';
import {View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from '../screens/Login';
import OnboardingScreen from '../screens/Onboarding';
import AsyncStorage from '@react-native-community/async-storage';



const Stack = createStackNavigator();

export const AuthStack = () => {
  const [isFirstLaunch, setIsFirstLaunch] = useState(null);
  let routeName;

  useEffect(() => {
    AsyncStorage.getItem('alreadyLaunched').then((value) => {
      if (value == null) {
        AsyncStorage.setItem('alreadyLaunched', 'true'); 
        setIsFirstLaunch(true);
      } else {
        setIsFirstLaunch(false);
      }
    }); 
  
    
  
  }, []);

  if (isFirstLaunch === null) {
    return null; 
  } else if (isFirstLaunch == true) {
    routeName = 'Onboarding';
  } else {
    routeName = 'Login';
  }

  return (
    <Stack.Navigator initialRouteName={routeName}>
      <Stack.Screen
        name="Onboarding"
        component={OnboardingScreen}
        options={{header: () => null}}
      />
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{header: () => null}}
      />
      
      <Stack.Screen name="SignUp" component={SignUpScreen}/>
    </Stack.Navigator>
  );
};

These are the dependencies in the package.json file

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.14.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-web": "~0.13.12"
  },

This is the error

Failed building JavaScript bundle.
Unable to resolve module @react-native-community/async-storage from C:\Users\Jayant Mukundam\Desktop\te-project\cirl_v2\App.js: @react-native-community/async-storage could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

Also, I am not able to figure out how to follow those steps suggested in the error part.

Answer 1

It is due to wrong import statement. try to import AsyncStorage from react-native-async-storage.

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

instead of

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

in your app.js file