"Failed to compile" error on npm run build

Question

I am trying to deploy a react JS app and am stuck at npm run build. My command line is throwing this error when I attempt to compile my react js (typescript) project with npm run build command:

Type error: Argument of type 'firebase.default.auth.Auth' is not assignable to parameter of type 'import("/Users/jaxfloyd/Documents/Programming/The_Sportsbook/get-rich-or-die-trying/growth/next-firebase-stripe/node_modules/@firebase/auth/dist/auth-public").Auth'

The CLI points to my index.tsx file as the problem:

7 | 8 | export default function Home() {

9 | const [user, userLoading] = useAuthState(firebase.auth()); | ^ 10 | console.log("User is:", user); 11 | 12 | return (

This is my full index.tsx file:

import React from "react";
import Login from "../components/Login";
import styles from "../styles/Home.module.css";
import firebase from "../firebase/firebaseClient";
import { useAuthState } from "react-firebase-hooks/auth";
import { createCheckoutSession } from "../stripe/createCheckoutSession";

export default function Home() {
  const [user, userLoading] = useAuthState(firebase.auth());
  console.log("User is:", user);

  return (
    <div className={styles.container}>
      {!user && userLoading && <h1>Loading...</h1>}
      {!user && !userLoading && <Login />}
      {user && !userLoading && (
        <div>
          <h1>Hello, {user.displayName}</h1>
          <button onClick={() => createCheckoutSession(user.uid)}>
            Upgrade to premium!
          </button>
        </div>
      )}
    </div>
  );
}

Nothing online has an alternate import statement I can use for useAuthState. Any help would be much appreciated.

Mises Mises · Accepted Answer · 2022-06-26T00:51:58

There are two versions of Firebase, you are using them together instead of just one. Use Firebase version 8 or 9 not both of them. If library "react-firebase-hooks/auth" is using functional approach, use Firebase version 9 to get Auth. You need to use function import { getAuth } from 'firebase/auth'. Same i dont know how you initialize app in version 9 you can do it using function import { initializeApp } from 'firebase/app'.

"Failed to compile" error on npm run build

1 Answers