Estoy usando FirebaseUI con el complemento Gridsome y recibo el error ReferenceError: window is not defined . Esto se debe a que SSR y FirebaseUI deben llamar al objeto de ventana que solo está disponible en los navegadores.
Revisé la documentación de Gridsome y encontré process.isClient debería resolver el problema, pero no sé cómo debo implementarlo. Aquí está el código que probé:
<script> import firebase from "@firebase/app"; import * as firebaseui from "firebaseui"; import "firebaseui/dist/firebaseui.css"; export default { name: "LoginSection", mounted() { if (process.isClient) { this.mountUi(); } }, methods: { mountUi() { let ui = firebaseui.auth.AuthUI.getInstance(); if (!ui) { ui = new firebaseui.auth.AuthUI(firebase.auth()); } const uiConfig = { signInSuccessUrl: "/profile", signInOptions: [ firebase.auth.FacebookAuthProvider.PROVIDER_ID, firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID, ], }; ui.start("#firebaseui-auth-container", uiConfig); }, }, }; </script>intente solicitar el paquete "firebaseui" en la declaración isClient
<script> import firebase from "@firebase/app"; import "firebaseui/dist/firebaseui.css"; export default { name: "LoginSection", mounted() { if (process.isClient) { window.firebaseui = require("firebaseui") this.mountUi(); } }, methods: { mountUi() { let ui = firebaseui.auth.AuthUI.getInstance(); if (!ui) { ui = new firebaseui.auth.AuthUI(firebase.auth()); } const uiConfig = { signInSuccessUrl: "/profile", signInOptions: [ firebase.auth.FacebookAuthProvider.PROVIDER_ID, firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID, ], }; ui.start("#firebaseui-auth-container", uiConfig); }, }, }; </script>Resolví mi problema usando una importación dinámica en asíncrono. Aquí está mi código:
<script> import firebase from "firebase/app"; import "firebaseui/dist/firebaseui.css"; export default { name: "LoginSection", async mounted() { const firebaseui = await import("firebaseui"); let ui = firebaseui.auth.AuthUI.getInstance(); if (!ui) { ui = new firebaseui.auth.AuthUI(firebase.auth()); } const uiConfig = { signInSuccessUrl: "/profile", signInOptions: [ firebase.auth.FacebookAuthProvider.PROVIDER_ID, firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID, ], }; ui.start("#login-section", uiConfig); }, }; </script> require("firebaseui") también funcionaría, pero es más recomendable usar import.