Encountering the following error message:
Error: Directory import 'C:\Users\My Name\Documents\Code\WebProjects\nextfire-app\node_modules\firebase\app' is not supported when resolving ES modules imported from C:\Users\My Name\Documents\Code\WebProjects\nextfire-app.next\server\pages\enter.js. Did you intend 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();
The code snippet above resides in a file named firebase.js, and it is accessed by enter.js using the following line of code:
import { auth, googleAuthProvider } from "../lib/firebase";This is how my package.json looks like:
{
"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 unsure about the meaning behind this error, making debugging quite challenging. Additionally, I have not come across anyone facing a similar issue.