Vite Build: Cannot find namespace 'firebase'

[Snazzie]

Im migrating my react spa to vite from react-scripts, it uses firebase authentication, project made with --template react-swc-ts.

the applications runs fine with pnpm dev. but eslint and vite build complains about unable to resolve it when it is in fact imported.

see image, you can see line 14 it was able to resolve it but further down it isnt. very baffling because i havent got this issue in my react-scripts project nor vite dev is having this issue.

package.json

        "firebase": "^9.21.0",
        "react-firebaseui": "^6.0.0",

// Import FirebaseAuth and firebase.
import React, { ReactElement, useEffect, useState } from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import "firebase/compat/auth";
import { useNavigate } from "react-router-dom";
import firebase from "firebase/compat/app";

// Configure FirebaseUI.
const uiConfig = {
    // Popup signin flow rather than redirect flow.
    signInFlow: "popup",
    // We will display Google and Facebook as auth providers.
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
    ],
    callbacks: {
        // Avoid redirects after sign-in.
        signInSuccessWithAuthResult: () => false
    }
};
export const UserContext = React.createContext<{ user: firebase.User; signOut: () => void } | null>(null);
const SignInWrapper: React.FunctionComponent<{ children?: ReactElement | ReactElement[] }> = props => {
    const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.
    const [user, setUser] = useState<firebase.User | null>(null);
    const navigate = useNavigate();

    const signOut = () =>
        firebase
            .auth()
            .signOut()
            .then(() => navigate("/"));

    useEffect(() => {
        const unregisterAuthObserver = firebase.auth().onAuthStateChanged(thisUser => {
            setIsSignedIn(!!thisUser);
            setUser(thisUser);
            if (!thisUser) unsetTokenCookie();
        });
        return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
    }, []);

    useEffect(() => {
        const unregisterAuthObserver = firebase.auth().onIdTokenChanged(async thisUser => {
            setIsSignedIn(!!thisUser);

            const tResult = await thisUser?.getIdTokenResult(true);
            if (tResult) setTokenCookie("Bearer " + tResult.token, new Date(tResult.expirationTime));
        });
        return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
    }, []);

    if (!isSignedIn) {
        return (
            <div style={{ display: "grid", height: "100%", width: "100%", alignContent: "center", justifyContent: "center" }}>
                <StyledFirebaseAuth
                    uiCallback={ui => ui.disableAutoSignIn()}
                    uiConfig={uiConfig}
                    firebaseAuth={firebase.auth()}
                />
            </div>
        );
    } else return <UserContext.Provider value={user ? { user, signOut } : null}>{props.children}</UserContext.Provider>;
};

function setTokenCookie(token: string, expires: Date) {
    if (token) document.cookie = `token=${token}; expires=${expires}; path=/; secure=true; samesite=Strict;`;
}
function unsetTokenCookie() {
    document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
export default SignInWrapper;

[Snazzie]

wonky cache or something. issue resolved

[Snazzie]

nope nevermind

[Snazzie]

ok so i managed to get it working by using import * as firebase from 'firebase/auth';

instead of import firebase from "firebase/compat/app";