I'm getting the following error:

Error: Directory import 'C:\Users\My Name\Documents\Code\WebProjects\nextfire-app\node_modules\firebase\app' is not supported resolving ES modules imported from C:\Users\My Name\Documents\Code\WebProjects\nextfire-app.next\server\pages\enter.js Did you mean to import firebase/app/dist/index.cjs.js?

import firebase from "firebase/app"
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";

const firebaseConfig = {
    // myConfig stuff
  };

if (!firebase.app.length) {
    firebase.initializeApp(firebaseConfig)
}

export const auth = firebase.auth();

export const firestore = firebase.firestore();
export const storage = firebase.storage();

This code is inside firebase.js which gets called from enter.js using this line

import { auth, googleAuthProvider } from "../lib/firebase";

This is my package.json:

{
  "name": "nextfire-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "firebase": "^8.2.1",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-firebase-hooks": "^5.0.3",
    "react-hot-toast": "^2.2.0"
  },
  "devDependencies": {
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6"
  }
}

I'm not even sure what this error is trying to tell me so it's been very difficult to debug. I also haven't seen anyone else with a similar issue.