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

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.

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 firebase@9.17.2", it finally updated to the latest version and solved the problem.