如何在Gridsome中使用isClient解决FirebaseUI的window未定义报错

问题核心原因 #

报错是因为Gridsome服务端渲染（SSR）阶段会提前执行模块导入逻辑，你在<script>顶部直接导入firebaseui相关模块的操作，在服务端运行时就会触发firebaseui对仅浏览器端可用的window对象的调用，此时还没运行到mounted钩子的process.isClient判断，所以原有写法不生效。

修复步骤 #

1. 移除<script>顶部的import * as firebaseui from "firebaseui"和import "firebaseui/dist/firebaseui.css"两行代码，将firebaseui相关资源改为客户端环境下动态导入
2. 调整mountUi方法为异步方法，在确认客户端环境后再加载firebaseui资源

完整修正代码 #

<script>
import firebase from "@firebase/app";
import "@firebase/auth";
export default {
  name: "LoginSection",
  mounted() {
    if (process.isClient) {
      this.mountUi();
    }
  },
  methods: {
    async mountUi() {
      // 仅客户端环境下动态导入firebaseui资源
      const firebaseui = (await import('firebaseui')).default
      await import('firebaseui/dist/firebaseui.css')
      
      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>

额外注意事项 #

• 如果存在css加载时序问题，可以将firebaseui/dist/firebaseui.css全局导入到Gridsome的main.js中，仅在客户端环境加载即可
• 确保项目中已经完成firebase的初始化配置，避免auth模块调用报错

内容的提问来源于stack exchange，提问作者Arka-cell