firebaseui で TypeError: Cannot read property 'auth' of undefined って言われる時

現症

firebaseui を使おうとすると以下のようにエラーになる

Chrome

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'auth' of undefined"

TypeError: Cannot read property 'auth' of undefined

Safari

[Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 'new firebaseui__WEBPACK_IMPORTED_MODULE_1__["default"].auth')"

TypeError: undefined is not an object (evaluating 'new firebaseui__WEBPACK_IMPORTED_MODULE_1__["default"].auth')

Firefox

Vue warn]: Error in mounted hook: "TypeError: firebaseui__WEBPACK_IMPORTED_MODULE_1__.default is undefined"

TypeError: "firebaseui__WEBPACK_IMPORTED_MODULE_1__.default is undefined"

対処

firebase と firebaseui の import を以下のように変える

/*
import firebase from "firebase";
import firebaseui from 'firebaseui';
import "firebaseui/dist/firebaseui.css";
*/

import "firebaseui/dist/firebaseui.css";
import * as firebase from "firebase/app";
import "firebase/auth";
import * as firebaseui from 'firebaseui';

references