VueJS and Firebase - import firebase package the correct way

user_12181414 0
Viewed 1170

I struggle with the correct import of the firebase SDK. I use Vue3 and installed firebase via yarn add firebase

This is my firebase.js file:

import firebase from 'firebase/app';

However, this results in the following error: 1:1 error 'firebase/app' should be listed in the project's dependencies. Run 'npm i -S firebase/app' to add it import/no-extraneous-dependencies 

import firebase from 'firebase';

This works, but I get the follwing warning:

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';

So, first way seems to be recommended, but it does not work out for me. What am I doing wrong?

firebase vue.js
2 Answers

Update: This seems to be fixed in v2.23.4 (eslint-plugin-import).

Original answer: You're not doing anything wrong. This is a bug, probably related to the package definition in firebase, but it's discussed here inside the eslint rule's repo: https://github.com/benmosher/eslint-plugin-import/issues/2065

You either can use a comment to stop the error from occurring like so:

// eslint-disable-next-line import/no-extraneous-dependencies
import firebase from 'firebase/app';

Or you'll have to wait for the issue to be resolved. Downgrading to v2.22.1 of eslint-plugin-import might also work.

user_10147820

You need to create a config file for firebase and importing firebase here. Then, you register the module you need and exported it so other file can use it as well.

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";

const firebaseConfig = {
    // you can get this from your firebase console.
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

// init firebase
firebase.initializeApp(firebaseConfig);

// init services
const projectFirestore = firebase.firestore();
const projectAuth = firebase.auth();
const projectStorage = firebase.storage();

export { projectFirestore, projectAuth, projectStorage };

On your other file where you want to use your firebase, you could do something like this to import it.

import { projectAuth } from '../firebase/config'

const user = ref(projectAuth.currentUser)
user_103201160
Related