14

I'm trying to read and write to firestore, use firebase's authentication, and firebase's storage within a expo managed react-native application.

Full Error:

While trying to resolve module `firebase` from file `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\firebase.js`, the package `C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index`. Indeed, none of these files exist:

  * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * C:\Users\joshu\Desktop\VSProjects\VolleyballConnect\node_modules\firebase\index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

My firebase config file:

import firebase from "firebase";
import { initializeApp } from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

// I'm using the example key here, I have the correct config
const firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};

if (firebase.apps.length === 0) {
  initializeApp(firebaseConfig);
}

const db = firebase.firestore();
const auth = firebase.auth();
const storage = firebase.storage();

export { db, auth, storage };

I installed the firebase package with:

expo install firebase

Any help would be greatly appreciated. Thank you!

7 Answers 7

18

To reduce the size of the app, firebase SDK (v9.0.0) became modular. You can no longer do the import statement like before on v8.

You have two options.

  1. Use the backwards compatible way. (it will be later removed):

This:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Should be changed to:

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
  1. Refactor your code now.

From this:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

To this:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

You should definitely check the documentation

15

I have met the same issue today, in my case, it has been solved by followings.

1.

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

change from ↓

if (firebase.apps.length === 0) {
  initializeApp(firebaseConfig);
}

to ↓

app = firebase.initializeApp(firebaseConfig)

This link was really helpfull

To ba safe, I share my firebase.js (hiding personal info)

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: "AIzxxxxxxxxxxxxxxxxxxxBbBFNGMI",
  authDomain: "sixxxxxxxxxcc8.firebaseapp.com",
  projectId: "sxxxxxxxxxxx8",
  storageBucket: "xxxxxxxxxxxxxcc8.appspot.com",
  messagingSenderId: "6xxxxxxxxxx",
  appId: "1:65xxxxxxxx13:web:d0exxxxxxxxxxxxxxxxx7c"
};

let app;

if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig)
} else {
  app = firebase.app();
}

const db = app.firestore();
const auth = firebase.auth();

export { db, auth };
0
5

Uninistall firebase, then install firebase@8.2.3

2

First check your package.json , what is your firebase version.

"firebase": "9.9.1",

if it is more than 9.0.0 you can change it to

"firebase": "8.2.3",

and run

npm install

it work for me.

2

After alot of research i found that we have not configured metro to read .cjs extensions.

create a metro.config.js file in root folder and paste this code.

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: [...assetExts, "cjs"],
    },
  };
})();

0

Try using this import statement in firebase.js file

import  firebase  from 'firebase/compat';
0

I had this issue when my project was named "firebase".

Simply renaming the project and editing the name in the package.json fixed this for me.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.