🔥

Firebase 「Module 'firebase/app' has no exported member 'User'.」のエラー

2021/11/11に公開

問題概要

Firebase Authentication を使って,react に認証処理を追加しようとしたら,以下のようなエラーが発生しました。
User クラスを import できていないようです。

Module '"firebase/app"' has no exported member 'User'. Did you mean to use 'import User from "firebase/app"' instead?

日本語。

モジュール '"firebase/app"' にはエクスポートされたメンバー 'User' がありません。'import User from "firebase/app"' を使用するつもりでしたか?

原因

理由を調べていたら以下の記事が参考になりました。

https://stackoverflow.com/questions/64561612/firebase-v8-typescript-definition-import-for-user

Firebase は 7 系と 8 系でUserクラスの import 方法の違いが原因でした。

解決策

7系と8系で使い分ける必要がありました。
ソースコードは以下のようになります。

Firebase 7 系より前。

import { User } from "firebase/app";
import { createContext, useEffect, useState } from "react";

interface IAuthContext {
  currentUser: User | null | undefined;
}

Firebase 8 系。

import firebase from "firebase/app";
import { createContext, useEffect, useState } from "react";

interface IAuthContext {
  currentUser: firebase.User | null | undefined;
}

Discussion