Importing firebase from node_modules not working

Question

I have created a folder in htdocs directory named firestore, and using cmd to install npm firebase in firestore directory. It generates package.json, package-lock.json and node_modules. I want to link to firebase but it is not working. I take away the firebaseconfig key for privacy reasons and yes, I did create a firestore database project in firebase. When I use import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.2/firebase-app.js"; and import { getFirestore, collection, getDocs, onSnapshot, addDoc, deleteDoc, doc, getDoc, updateDoc, } from "https://www.gstatic.com/firebasejs/9.6.2/firebase-firestore.js"; , it is working fine. However I want to use from firebase/app instead of url.

Code that links to firebase:

// Import the functions you need from the SDKs you need
import { initializeApp } from "node_modules/firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import {
  getFirestore,
  collection,
  getDocs,
  onSnapshot,
  addDoc,
  deleteDoc,
  doc,
  getDoc,
  updateDoc,
} from "node_modules/firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

export const db = getFirestore();


export const saveTask = (title, description) =>
  addDoc(collection(db, "tasks"), { title, description });

export const onGetTasks = (callback) =>
  onSnapshot(collection(db, "tasks"), callback);


export const deleteTask = (id) => deleteDoc(doc(db, "tasks", id));

export const getTask = (id) => getDoc(doc(db, "tasks", id));

export const updateTask = (id, newFields) =>
  updateDoc(doc(db, "tasks", id), newFields);

export const getTasks = () => getDocs(collection(db, "tasks"));

firestore directory:

and inside node_modules:

Answer 1

You have to import it like this:

 import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore'; //...

or like so if you use common js:

 const { initializeApp } = require('firebase/app'); const { getFirestore, collection, getDocs } = require('firebase/firestore'); //...

Just remove "node_modules/" from the import statement

See the package DOCs