How to use isClient in Gridsome?

Question

I am using FirebaseUI with Gridsome plugin and I am getting the error ReferenceError: window is not defined. This is due to SSR and FirebaseUI must be calling the window object which is only available on browsers.

I've looked into Gridsome documentation and found process.isClient should solve the problem but I don't know how I must implement it. Here is the code that I tried:

<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>

score 1 · Answer 1 · answered Sep 22 '21 at 16:50

try requiring the "firebaseui" package in the isClient statement

<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>

score 0 · Answer 2 · answered Sep 23 '21 at 10:37

I solved my problem using a dynamic import in async. Here is my code:

<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") would also work, but it's more recommended to use import.

How to use isClient in Gridsome?

2 Answers2