Cannot install Firebase for VueJS + NodeJS

Question

I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors 10:44:30 AM

These dependencies were not found:

@firebase in ./src/main.js
firebase in ./src/components/firebaseInit.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue and 3 others
firebase/firestore in ./src/components/firebaseInit.js`. and asking me to install firebase doing: npm install --save @firebase firebase firebase/firestore. which I did many times, but still the same error.

Here is my package.JSON:

 {
  "name": "Project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "firebase": "^7.13.1",
    "node-pre-gyp": "^0.14.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "gh-pages": "^1.1.0",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

node -v = 16.12.1

npm -v =6.14.4

Any idea ?

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import firebase from "@firebase";
import "./components/firebaseInit";

Vue.config.productionTip = false;

let app;
firebase.auth().onAuthStateChanged(function(user) {
  if (!app) {
    /* eslint-disable no-new */
    app = new Vue({
      el: "#app",
      router,
      template: "<App/>",
      components: { App }
    });
  }
});

firebaseInit.js

import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();

Can you pls share the entire code of `main.js` and `firebaseInit.js`? — Renaud Tarnec, Apr 06 '20 at 15:06
Make sure you are following the setup in the docs for the "using module bundlers" located here https://firebase.google.com/docs/web/setup — JimithyPicker, Apr 06 '20 at 15:15

score 3 · Answer 1 · answered Apr 07 '20 at 18:59

3

I find it, just replace "firebase": "^7.13.1" by "firebase": "7.13.1". and it worked. I don't know why, but it worked!

answered Apr 07 '20 at 18:59

Lydia halls

652
8
17

score 0 · Answer 2 · answered Nov 09 '21 at 03:37

0

import { initializeApp } from 'firebase/app'
import { firebaseConfig } from './config'

initializeApp(firebaseConfig)

answered Nov 09 '21 at 03:37

Supapon Pick Pucknavin

473
4
9

Please share more details about your installation procedures. The code you paste is how you want to use the library, not how you should install them. (Unless you don't really know how to install in the first place.) – Koala Yeung Nov 09 '21 at 04:29

Cannot install Firebase for VueJS + NodeJS

2 Answers2

Linked