title: How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."
body: <p>I am trying to implement firebase in my React application but it seems my version of importing is outdated.
  Here is my code:</p>
  <pre><code>import firebase from &quot;firebase/app&quot;;
  import &quot;firebase/auth&quot;;
  
  const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
  });
  
  export const auth = app.auth();
  export default app;
  </code></pre>
  <p>I've replaced my config keys with process.env.REACT_APP_FIREBASE... as they are stored in another local .env file. I've also tried different ways of importing firebase, but it seems most posts are outdated. This is the error I am getting:</p>
  <blockquote>
  <p>./src/firebase.js
  Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').</p>
  </blockquote>
  <p>I also have another file for authContext so I will need to keep the 'auth' keyword in my firebase.js file:</p>
  <pre><code>import React, { useContext, useState, useEffect } from &quot;react&quot;;
  import { auth } from &quot;../firebase&quot;;
  
  const AuthContext = React.createContext();
  
  export function useAuth() {
    return useContext(AuthContext);
  }
  
  const AuthProvider = ({ children }) =&gt; {
    const [currentUser, setCurrentUser] = useState();
  
    function signup(email, password) {
      return auth.createUserWithEmailAndPassword(email, password);
    }
  
    useEffect(() =&gt; {
      const unsubscribe = auth.onAuthStateChanged((user) =&gt; {
        setCurrentUser(user);
      });
  
      return unsubscribe;
    }, []);
  
    const value = {
      currentUser,
      signup,
    };
    return &lt;AuthContext.Provider value={value}&gt;{children}&lt;/AuthContext.Provider&gt;;
  };
  
  export default AuthProvider;
  </code></pre>