CODEWITHSUNDEEP
firebasevue.js
Data Mastery
Data Mastery

Reputation: 2085

VueJS and Firebase - import firebase package the correct way

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?

Upvotes: 6

Views: 2638

Answers (2)

Ren&#233;
Ren&#233;

Reputation: 1442

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.

Upvotes: 5

Kevin Yobeth
Kevin Yobeth

Reputation: 1017

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)

Upvotes: -1

Related Questions