如何在 Gridsome 中使用 isClient？答案

【问题标题】：How to use isClient in Gridsome?如何在 Gridsome 中使用 isClient？
【发布时间】：2021-11-12 04:04:10
【问题描述】：

我正在使用带有 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>

【问题讨论】：

标签： javascript node.js vue.js dom gridsome

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：