Cannot import `getReactNativePersistence` in `[email protected]` – Firebase

The Problem:

A developer is encountering issues while importing the getReactNativePersistence module from firebase/auth in Typescript. Initially, the import worked with Firebase SDK version 9.22.0, but after updating to version 10.1.0, the firebase/auth/react-native module seems to be missing. Attempts to import getReactNativePersistence directly from firebase/auth also resulted in an error, indicating that the module is not exported as part of that package. The developer is using Expo with Metro as the default configuration and needs guidance on how to successfully import getReactNativePersistence in the latest version of the Firebase SDK.

The Solutions:

Solution 1: Adding Paths in tsconfig.json

The issue you’re facing while importing `getReactNativePersistence` from `firebase/auth` in TypeScript is related to Type definitions mismatch. To fix this issue, follow these steps:

1. Open your project’s tsconfig.json file.
2. Add the following code inside the compilerOptions object:

{
  "compilerOptions": {
    "paths": {
      "@firebase/auth": ["./node_modules/@firebase/auth/dist/index.rn.d.ts"]
    }
  },
  "extends": "expo/tsconfig.base"
}

3. Save the tsconfig.json file.

This configuration will tell TypeScript to look for the correct type definitions for `firebase/auth` in the specified path. After making these changes, you should be able to import `getReactNativePersistence` without encountering any errors.

Solution 2: Force Type Conversion

1. Import ‘firebase/auth’ and save it as ‘firebaseAuth’.

import * as firebaseAuth from 'firebase/auth';

2. Cast ‘firebaseAuth’ as ‘any’ and then access ‘getReactNativePersistence’.

const reactNativePersistence = (firebaseAuth as any).getReactNativePersistence;

3. Use ‘reactNativePersistence’ to initialize Auth with AsyncStorage.

export const auth = initializeAuth(app, {
  persistence: reactNativePersistence(AsyncStorage),
});

Solution 3: Implementing getReactNativePersistence locally

To import the getReactNativePersistence module in [email protected], you can copy the implementation and common types from the GitHub repository into an internal file in your project.

Here are the steps to implement getReactNativePersistence locally:

1. Copy the getReactNativePersistence implementation from:

https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/src/platform_react_native/persistence/react_native.ts

2. Copy the common types from:

https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/src/core/persistence/index.ts

3. Create an internal file in your project and paste the copied code into it.

4. Replace the references to getReactNativePersistence with your local version.

5. Import the local version of getReactNativePersistence in your code:

import { getReactNativePersistence } from "path/to/local/file";

By following these steps, you can implement getReactNativePersistence locally and use it in your project, even with [email protected].

Solution 4: Update Metro configuration

To fix the error of "Module ‘firebase/auth‘ has no exported member 'getReactNativePersistence'" while importing getReactNativePersistence in Firebase SDK version 10.1.0, you need to update your Metro configuration as follows:

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

// initialize configuration
const config = getDefaultConfig(__dirname);
config.resolver.resolverMainFields = ['react-native', 'browser', 'main'];

module.exports = config;

This modification ensures that Metro looks for modules in the correct order, allowing it to find the getReactNativePersistence module within the Firebase SDK.

Solution 5: Using a global TypeScript declaration file

You can create a global Firebase type (firebase.d.ts) file and declare the types like so:

import { Persistence, ReactNativeAsyncStorage } from "firebase/auth";

declare module "firebase/auth" {
  export declare function getReactNativePersistence(
    storage: ReactNativeAsyncStorage
  ): Persistence;
}

This will allow you to use the getReactNativePersistence() function as if it were part of the Firebase Auth library.