在 react s-s-r 应用程序中调用 firebase 消息传递方法时，如何修复 self 未定义？

Posted 2023-02-22

【中文标题】在 react s-s-r 应用程序中调用 firebase 消息传递方法时，如何修复 self 未定义？

【英文标题】：How to fix self is not defined when firebase messaging method called in react s-s-r app?

【发布时间】：2020-01-10 00:47:22

【问题描述】：

我正在尝试在使用 https://github.com/jaredpalmer/razzle with-react-router-3 创建的 s-s-r 应用程序中使用 firebase 按摩。我已经在使用 firebase，它非常好用，包括托管。但是当我开始在应用程序中添加消息时开始抛出错误。

我的入口点看起来像，

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/messaging';

import FirebaseConfig from 'config/firebase-config.json';
if (!firebase.apps.length) 
  firebase.initializeApp(FirebaseConfig);

const messaging = firebase.messaging();

当我使用razzle start 启动服务器时出现以下错误

/Users/subkundu/Desktop/Work/Projects/React/ownerstown/node_modules/@firebase/messaging/index.ts:75
  if (self && 'ServiceWorkerGlobalScope' in self) 
  ^

ReferenceError: self is not defined

我该如何解决？任何领先都会令人惊叹。谢谢。 :)

【参考方案1】：

我相信您必须提供检查以查看window 是否可用。

let Messaging;
if (YOUR_CHECK_HERE) 
    Messaging = firebase.messaging();

// Then you can use "Messaging"

我不熟悉 razzle。访问 window 取决于服务器端渲染 (s-s-r) 框架。我从这个post 得到了这个想法。当我用 nuxt.js 遇到这个问题时，我可以用这个 process.browser 检查 window。希望这会有所帮助！

【讨论】：

是的，你是对的！感谢您回复。一周前，我通过执行类似 export default function isBrowser(func) return process.browser 之类的操作来修复它？函数 : () => isBrowser(func); 并在我的文件中使用它