Why unable to resolve module specifier "firebase/app"

My JS Code goes as:

import { initializeApp } from "firebase/app";


const firebaseConfig = {
   //config object
  };

 
const app = initializeApp(firebaseConfig);

Im getting this error since a very long time and would like someone to please look into it:

Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".

Solution 1:

Did you has been followed the steps from the official docs?

1. Step 1: Create a Firebase project and register your app
2. Step 2: Install the SDK and initialize Firebase

This page describes setup instructions for version 9 of the Firebase JS SDK, which uses a JavaScript Module format.

This workflow uses npm and requires module bundlers or JavaScript framework tooling because the v9 SDK is optimized to work with module bundlers to eliminate unused code (tree-shaking) and decrease SDK size.

2.a. Install Firebase using npm

npm install firebase

2.b. Initialize Firebase in your app and create a Firebase App object

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

3. Access Firebase in your app

Firebase services (like Cloud Firestore, Authentication, Realtime Database, Remote Config, and more) are available to import within individual sub-packages.

The example below shows how you could use the Cloud Firestore Lite SDK to retrieve a list of data.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

You could refer my answer to the official link below

https://firebase.google.com/docs/web/setup

Hopefully can help you.