Блог

Главная - Вопросы по программированию - Как использовать isClient в Gridsome?

Как использовать isClient в Gridsome?

#javascript #node.js #vue.js #dom #gridsome

Вопрос:

Я использую FirebaseUI с плагином Gridsome, и я получаю ошибку ReferenceError: window is not defined . Это связано с SSR, и FirebaseUI должен вызывать объект window, который доступен только в браузерах.

Я просмотрел документацию по сетке и нашел 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>

Ответ №1:

попробуйте запросить пакет «firebaseui» в инструкции 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>

Ответ №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") это также сработало бы, но более рекомендуется использовать импорт.

Метки: