如何在Gridsome中使用isClient？

Question

我正在使用带有Gridsome插件的FirebaseUI，并且我得到了错误ReferenceError: window is not defined。这是由于SSR和FirebaseUI必须调用窗口对象，而窗口对象只在浏览器上可用。

我研究过Gridsome documentation，发现process.isClient应该可以解决这个问题，但我不知道我必须如何实现它。下面是我尝试过的代码：

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

Answer 1

尝试在isClient语句中要求"firebaseui“包

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

Answer 2

我在异步中使用动态导入解决了我的问题。下面是我的代码：

<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")也可以，但更推荐使用import。