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
– Renaud Tarnec, Commented Apr 6, 2020 at 15:06
Make sure you are following the setup in the docs for the "using module bundlers" located here firebase.google.com/docs/web/setup — JimithyPicker
– JimithyPicker, Commented Apr 6, 2020 at 15:15

Lydia halls · Accepted Answer · 2020-04-07 18:59:20Z

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 7, 2020 at 18:59

Lydia halls

6829 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Supapon Pick Pucknavin · Accepted Answer · 2021-11-09 03:37:45Z

0

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

initializeApp(firebaseConfig)

answered Nov 9, 2021 at 3:37

Supapon Pick Pucknavin

4934 silver badges9 bronze badges

1 Comment

Koala Yeung Over a year ago

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.)

Collectives™ on Stack Overflow

Cannot install Firebase for VueJS + NodeJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related