Uncaught TypeError: (0 , firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp) is not a function

Question

I am currently using Vue3 with Vuex and firebase. I am trying to build authentication feature with firebase.

I have followed every step described in different videos, tutorials, etc. However, I am currently having an error that says

"Uncaught TypeError: (0 , firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp) is not a function"

** And I am getting this warning from the console:**

warning in ./src/firebase/config.js

export 'initializeApp' (imported as 'initializeApp') was not found in 'firebase/app' (possible exports: default)

warning in ./src/firebase/config.js

export 'getAuth' (imported as 'getAuth') was not found in 'firebase/auth' (module has no exports)

Here is the code of script section from the 'SignUp.vue' component.

<script>
import { ref } from "vue";
import { computed } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const email = ref("");
    const password = ref("");

    const store = useStore();

    const errorMessage = computed(() => store.state.auth.error);
    console.log(store.state.user);
    store.commit("setUser", "yoshi");

    const handleSubmit = () => {
      store.dispatch("signUp", {
        email: email.value,
        password: password.value,
      });
    };
    return { email, password, errorMessage, handleSubmit };
  },
};
</script>

This is the code from config.js where I have it under 'firebase' folder which I created under src folder:

import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  //private info
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// const analytics = getAnalytics(app);
const auth = getAuth();

export { auth, db };

Lastly, here is the code of index.js under the folder 'store':

import { createStore } from "vuex";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebase/config.js";

const store = createStore({
  state: {
    user: null,
    teaminfo: [],
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload;
      console.log("user state changed:", state.user);
    },
    setError(state, error) {
      state.error = error;
    },
  },
  actions: {
    async signUp(context, { email, password }) {
      const res = await createUserWithEmailAndPassword(auth, email, password);
      if (res) {
        context.commit("setUser", res.user);
      } else {
        throw new Error("could not complete Sign Up");
      }
    },
  },
});

export default store;

+Here is the dependencies section from package.json

{
  "name": "forteamprojects",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@popperjs/core": "^2.11.6",
    "core-js": "^3.8.3",
    "firebase": "^8.10.1",
    "install": "^0.13.0",
    "json-server": "^0.17.1",
    "npm": "^9.5.1",
    "sass": "^1.57.1",
    "vue": "^3.2.13",
    "vue-router": "^4.1.6",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass-loader": "^13.2.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Currently, the page is giving me blank screen, giving me following error:

I searched around in the google for the solution, but it seems there is no right one for the situation. The problem seems to have occurred from simple mistake, but I have no idea where it actually came from. I tried installing the firebase again with 'npm install firebase' in the terminal, but it doesn't fix the problem btw.

Thank you.

Answer 1

It seems that the outdated version of firebase was the cause of it all. Before, I simply installed firebase with "npm install firebase" in the console, and it has been installing the old version. Now that I have typed "npm install [email protected]", it finally updated to the latest version and solved the problem.