Firebase error - SyntaxError: Named export 'SDK_VERSION' not found

Question

I am building a web app using Next.js, and I am using Firestore as my database and thus Firebase, I am connecting to the database with the following code:

import firebase from 'firebase/compat/app'
import 'firebase/firestore'
import firebaseConfig from './firebaseConfig'


export default () => {
    if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);
    return firebase.firestore()
}

And it throws the following error:

error - SyntaxError: Named export 'SDK_VERSION' not found. The requested module '@firebase/app' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@firebase/app';
const { _getProvider, getApp, _removeServiceInstance, _registerComponent, registerVersion, SDK_VERSION: SDK_VERSION$1 } = pkg;

Any help?

EDIT

As has asked @Dharmaraj I'll add my package.json

{
  "name": "hey-there",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth0/nextjs-auth0": "^1.7.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.1",
    "firebase": "^9.7.0",
    "jsonwebtoken": "^8.5.1",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "sass": "^1.50.0",
    "socket.io-client": "^4.4.1",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "@types/jsonwebtoken": "^8.5.8",
    "@types/node": "17.0.24",
    "@types/react": "18.0.5",
    "@types/react-dom": "18.0.1",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "socket.io": "^4.4.1",
    "typescript": "4.6.3"
  }
}