I got this Error from chokidar when running code with firebase-CodePudding

I'm running my firebase project and got this error in the terminal

This dependency was not found:

firebase in ./src/firebaseInit.js

To install it, you can run: npm install --save firebase Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp

inside my firebaseInit.js

import firebase from 'firebase';

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxxx"
};

export default firebase.initializeApp(firebaseConfig);

and here's my package.json

{
"name": "mevnproject",
"version": "0.1.0",
"private": true,
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},
"dependencies": {
    "axios": "^0.25.0",
    "core-js": "^3.6.5",
    "firebase": "9.6.11",
    "socket.io": "^4.4.1",
    "vue": "^2.6.11",
    "vue-chat-scroll": "^1.4.0",
    "vue-google-charts": "^0.3.3",
    "vue-router": "^3.5.3",
    "vue2-google-maps": "^0.10.7",
    "vuetify": "^2.6.2",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0"
},
"devDependencies": {
    "@mdi/font": "^6.5.95",
    "@mdi/js": "^6.5.95",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "material-design-icons-iconfont": "^6.1.1",
    "vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
    ],
    "parserOptions": {
        "parser": "babel-eslint"
    },
    "rules": {}
},
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
]

}

I tried to uninstall and reinstall the firebase but still got the same error.

edit: in my components i've the script looks like this

<script>
import { db } from "../../firebaseInit";

export default {
  data() {
    return {
      message: null,
    };
  },
  methods: {
    saveMessage() {
      db.firestore()
        .collection("chat")
        .add({
          message: this.message,
        })
        .then(() => {
          console.log("Document Written");
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

CodePudding user response：

From your package.json file we can see that you use the Firebase SDK version 9. You therefore need to adapt your firebaseInit.js file. I recommend exporting only the services you need, i.e. Firestore in your case (see your comment below).

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxxx"
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export { db };

Then, in your component you do like:

import { db } from '../firebaseInit';
import {  collection, addDoc } from 'firebase/firestore';  // Example

export default {
  data() {
    return {
      message: null,
    };
  },
  methods: {
    saveMessage() {
      addDoc(collection(db, 'chat'), 
      {
        message: this.message,
      })
        .then(() => {
          console.log("Document Written");
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};

If you need to use several services, do as follows (for example):

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

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxxx"
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const storage = getStorage(firebaseApp);

export { db, storage, auth };

and in the component

import { db, auth } from '../firebaseInit';
import { doc, getDoc } from 'firebase/firestore';  // Example
import { signInWithEmailAndPassword } from '@firebase/auth';  // Example

More details in the doc.