Firebase error - SyntaxError: Named export 'SDK_VERSION' not found - node.js

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"
}
}