在react ssr应用程序中调用firebase消息传递方法时，如何修复自身未定义？

Question

我正在尝试在我的SSR应用程序中使用firebase消息，该应用程序是使用带有-react-router-3的https://github.com/jaredpalmer/razzle创建的。我已经在使用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

我该如何修复它？任何线索都会令人惊叹。谢谢。:)

Answer 1

我相信你必须提供一个检查，看看window是否可用。

let Messaging;
if (YOUR_CHECK_HERE) {
    Messaging = firebase.messaging();
}
// Then you can use "Messaging"

我不太熟悉razzy.访问window的方式取决于服务器端渲染(SSR)框架。我是从这个post得到这个想法的。当我在nuxt.js中遇到这个问题时，我能够用这个process.browser检查window。希望这能有所帮助！