How to use isClient in Gridsome?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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.