Vue3.js ) Error: Cannot find module 'firebase'

Question

I'm using firebase for the first time in vue.js. After installing firebase using npm, I added it to main.js as follows.

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import Router from "./router.js";
// bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

// firebase
import firebase from "firebase";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

firebase.initializeApp(firebaseConfig);

createApp(App).use(Router).mount("#app");

And this is package.json

  "dependencies": {
    "bootstrap": "^5.1.3",
    "core-js": "^3.6.5",
    "firebase": "^9.6.4",
    "vue": "^3.0.0",
    "vue-carousel-card": "^2.0.0",
    "vue-router": "^4.0.12",
    "vue3-carousel": "^0.1.35"
  },

If I add firebase and run serve it like this, an error that says firebase cannot be found is output.

This dependency was not found:

* firebase in ./src/main.js

To install it, you can run: npm install --save firebase

May I know the cause and solution of this? Thank you always.

npm ls -remote @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected] — Kevin Yang
– Kevin Yang, Commented Jan 25, 2022 at 5:27
I already tried "npm install --save firebase" and deleted it and installed it again. — Kevin Yang
– Kevin Yang, Commented Jan 25, 2022 at 5:28
I've firebase hosting this project before, can this be a problem? There are no errors in the new project. — Kevin Yang
– Kevin Yang, Commented Jan 25, 2022 at 6:11

Alejandro Bello Iglesias · Accepted Answer · 2022-04-25 13:01:45Z

4

You are using "firebase": "^9.6.4" which uses different way of importing.

You can downgrade to firebase 8:

npm remove firebase
npm add firebase@^8.10.0

But if you want to use firebase 9 you can either use

import firebase from 'firebase/compat/app' //v9

firebase.initializeApp({
   ...
})

or

import { initializeApp } from 'firebase/app';

initializeApp({
  ...
})

answered Apr 25, 2022 at 13:01

Alejandro Bello Iglesias

1091 silver badge6 bronze badges

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

Comments

Dharman · Accepted Answer · 2022-01-28 08:09:34Z

2

I've got the same issue, and I found a solution : change your firebase version, it'll work.

npm remove firebase
npm add firebase@^8.10.0

edited Jan 28, 2022 at 8:09

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jan 28, 2022 at 8:03

Pof

9898 silver badges25 bronze badges

Collectives™ on Stack Overflow

Vue3.js ) Error: Cannot find module 'firebase'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related