Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

200
Views
Where is 'initializeApp' in firebase imports?

So I started taking a look into firebase and just after defining the intialization as

import firebase from "firebase/compat"

const firebaseConfig = {
   apiKey: process.env.REACT_APP_API_KEY,
   authDomain: process.env.REACT_APP_AUTH_DOMAIN,
   projectId: process.env.REACT_APP_PROJECT_ID,
   storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
   messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
   appId: process.env.REACT_APP_APP_ID,
   measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

const chatSupportApp = firebase.initializeApp(firebaseConfig, "my-app");

A wild warning was display!

/*It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';*/

I search in many posts, including documentation and didn't really get how to initialize my app first before using any of the other imports

I found out lately that is was a bit hidden under "firebase/firebase-app"

so it get solved, as

import {initializeApp} from "firebase/firebase-app";

const firebaseConfig = {
    apiKey: ...............
};

const chatSupportApp = initializeApp(firebaseConfig, "my-app");

export default chatSupportApp;

This started as a question that I search in most stack overflow posts, but since I solve it for now somehow I wanted also to share with the community in here, but also consider any other suggestion, the question will be then.

Is this approach correct? why all the documentation suggest to do it with

import { initializeApp } from 'firebase/app'; as:

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';

This really didn't work for me at all and I was not able to use it.

Thanks and enjoy your code!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

import {initializeApp} from "firebase/firebase-app";

const firebaseConfig = {
    apiKey: ...............
};

const chatSupportApp = initializeApp(firebaseConfig, "my-app");

export default chatSupportApp;
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!