CODEWITHSUNDEEP
reactjsfirebase-realtime-databasefirebase-authentication
samyak bhabhra
samyak bhabhra

Reputation: 1

I am not able to compile my react application beacause of some error of import of firebase config

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyCq8nv8xkSX7Z1V2-1aQaxkW72HeurOZj8",
  authDomain: "cyclofit-ee7cf.firebaseapp.com",
  databaseURL: "https://cyclofit-ee7cf-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "cyclofit-ee7cf",
  storageBucket: "cyclofit-ee7cf.appspot.com",
  messagingSenderId: "676472405532",
  appId: "1:676472405532:web:cb0ccd1b8bd9c86372a9d9",
  measurementId: "G-NEEDNQ6SFS"
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

const auth = getAuth();

export { app, auth ,firebaseConfig};

//error I am getting is

Failed to compile.

./src/firebase.js Attempted import error: 'getAuth' is not exported from 'firebase/auth'.

// this is where i am trying to import my firebaseconfig

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { initializeApp } from 'firebase/app';

import registerServiceWorker from './registerServiceWorker';
import { firebaseConfig , auth} from './firebase';

initializeApp(firebaseConfig);

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

unable to run my react application.

Upvotes: 0

Views: 62

Answers (1)

Jug Patel
Jug Patel

Reputation: 41

In version 8.0.0, the Firebase SDK had a breaking change in the way it handles exports:

Breaking change: browser fields in package.json files now point to ESM bundles instead of CJS bundles. Users who are using ESM imports must now use the default import instead of a namespace import.

Before 8.0.0

import * as firebase from 'firebase/app'

After 8.0.0

import firebase from 'firebase/app' Code that uses require('firebase/app') or require('firebase') will still work, but in order to get proper typings (for code completion, for example) users should change these require calls to require('firebase/app').default or require('firebase').default. This is because the SDK now uses typings for the ESM bundle, and the different bundles share one typings file.

So, you will have to use the new ESM bundle default export:

import firebase from "firebase/app"

firebase.initializeApp({ ... }) If you are working with SDK version 9.0, read this question instead:

How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."

Upvotes: 0

Related Questions