Firebase v8 Typescript 用户定义导入

Question

With previous version of Firebase I use to import the Typescript definition of the User as following:

import {User} from 'firebase';

Following the introduction of v8 this import does not work anymore:

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

The release notes points the fact that the CJS bundles was dropped, nevertheless, does not mention how this import should now be resolved.

Any help appreciated, thank you in advance.

Answer 1

You can say this instead:

import firebase from "firebase/app"
const user: firebase.User = ...

Or if you want to abbreviate it:

import firebase from "firebase/app"
type User = firebase.User
const user: User = ...

Answer 2

在User Firebase JS SDK v8.0.0 导入User ，我能够解决我的问题，如下所示：

import {User} from '@firebase/auth-types';

Answer 3

Have you tried importing firebase and then accessing User with firebase.User ? It's obviously way more chunky but worked for me.

Edit: I was also having issues with conflicting imports previously - where I had a file called firebase.ts that was causing my app to zoink out. Just mentioning it in case you by chance have something similar

Answer 4

another alternative to import ing firebase is to add the firebase types in an index.d.ts file:

/// <reference types="firebase" />

type Firebase = typeof firebase.default

type FirebaseApp = firebase.default.app.App

type FirebaseUser = firebase.default.User

Note: I had to do firebase.default instead of firebase because I am using triple slash directives /// <reference types="..." />

You can omit .default by just importing firebase in the index.d.ts file:

import firebase from "firebase/app"

type Firebase = typeof firebase

type FirebaseApp = firebase.app.App

type FirebaseUser = firebase.User

Answer 5

For V9.0.0(Web version 9 (modular), this can be done by

// make alias for greater readability
import { User as FirebaseUser } from "firebase/auth";

Then you can use it by:

// here direct use the type inside a hooks 
const [user, setUser] = useState<FirebaseUser | null>(null)

Answer 6

user: firebase.default.User | null = null;

Worked for me