skip to Main Content

Most questions that I read on the topic said they receive Warning while, I receive Error and I can not run my project.

Today I upgraded expo-sdk from v.45 to v.48. Since then the whole day I am fighting the following error :
Android Bundling complete 118ms ERROR Invariant Violation: AsyncStorage has been removed from react-native core. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'

In my project, I do use AsyncStorage, however, I have imported it from the correct package. As I researched the issue comes from the fact that firebase-auth uses AsyncStorage from the wrong package. Everything I tried and read on the internet did not work for me. Mainly people suggest using const auth = initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage)}); I had troubles with that as well (everybody suggest it be imported from firebase/auth/react-native'; however I can’t import it from there)

My main question is why I can not start my expo. Everybody says this issue is a warning however I do receive it as an error and I can not start my project.

My package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "debug": "firebase emulators:start --inspect-functions"
  },
  "dependencies": {
    "@expo/config-plugins": "~6.0.0",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-camera-roll/camera-roll": "^5.2.4",
    "@react-native-community/datetimepicker": "6.7.3",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-community/slider": "4.4.2",
    "@react-native-firebase/app": "^17.3.1",
    "@react-native-firebase/auth": "^17.3.1",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/elements": "^1.3.3",
    "@react-navigation/material-top-tabs": "^6.2.2",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.2",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "axios": "^0.21.1",
    "expo": "^48.0.4",
    "expo-av": "~13.2.1",
    "expo-blur": "~12.2.2",
    "expo-camera": "~13.2.1",
    "expo-device": "~5.2.1",
    "expo-env-info": "^1.0.5",
    "expo-file-system": "~15.2.2",
    "expo-image-manipulator": "~11.1.1",
    "expo-image-picker": "~14.1.1",
    "expo-image-picker-multiple": "^1.4.1",
    "expo-linking": "~4.0.1",
    "expo-location": "~15.1.1",
    "expo-media-library": "~15.2.2",
    "expo-modules-autolinking": "~1.1.0",
    "expo-notifications": "~0.18.1",
    "expo-permissions": "~14.1.1",
    "expo-server-sdk": "^3.6.0",
    "expo-status-bar": "~1.4.4",
    "expo-video-player": "^1.6.1",
    "expo-video-thumbnails": "~7.2.1",
    "firebase": "^8.2.3",
    "firebase-admin": "^10.3.0",
    "firebase-functions": "^3.21.2",
    "formik": "^2.2.9",
    "moment": "^2.29.1",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-native": "0.71.3",
    "react-native-bottomsheet-reanimated": "0.0.39",
    "react-native-dropdown-picker": "^4.0.9",
    "react-native-expo-cached-image": "^1.3.1",
    "react-native-form-validator": "^0.3.5",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-google-places-autocomplete": "^2.1.2",
    "react-native-image-modal": "^2.0.3",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-interactable-reanimated": "0.0.15",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "1.3.2",
    "react-native-material-menu": "^2.0.0",
    "react-native-mentions": "^1.1.4",
    "react-native-modalbox": "^2.0.2",
    "react-native-optimized-flatlist": "^1.0.4",
    "react-native-orientation": "^3.1.3",
    "react-native-pager-view": "6.1.2",
    "react-native-paper": "^4.9.2",
    "react-native-parsed-text": "0.0.22",
    "react-native-popup-dialog": "^0.18.3",
    "react-native-progress": "^5.0.0",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-unimodules": "~0.14.5",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^2.3.1",
    "react-native-video-player": "^0.12.0",
    "react-native-walkthrough-tooltip": "^1.3.1",
    "react-native-web": "~0.18.11",
    "react-navigation": "^4.4.4",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "rn-tooltip": "^3.0.1",
    "rne-modal-tooltip": "gist:b28c003d87c619674def0878473338a0",
    "unimodules-permissions-interface": "^6.1.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "eslint": "^8.17.0",
    "eslint-plugin-react": "^7.30.0"
  },
  "private": true
}
 

2

Answers


  1. I had the same issue with packages using deprecated imports,

    What I did was install these versions of RNFirebase

      "@react-native-firebase/app": "^16.4.3",
      "@react-native-firebase/auth": "^16.4.3",
      "@react-native-firebase/database": "^16.4.3",
      "@react-native-firebase/storage": "^16.4.3",
    
    

    Don’t use expo install use npm install or yarn install to install none-expo packages in the future.

    Login or Signup to reply.
  2. old firebase packages use old version of AsyncStorage which is why you are getting the error. to fix this, update all the packages to the latest versions. from here

    npm i -g npm-check-updates
    ncu -u
    npm install
    

    now import firebase like this

    //import * as firebase from "firebase";
    import firebase from "firebase/compat/app";
    

    this will solve the AsyncStorage error

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search