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

Question

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

我对 razzle 不熟悉。访问 window 因服务器端渲染 (SSR) 框架而异。我从这个 post 得到了灵感。当我运行使用 nuxt.js 解决这个问题时，我能够使用 process.browser 检查 window。希望这对您有所帮助！

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

How to fix self is not defined when firebase messaging method called in react ssr app?

firebase

reactjs

firebase-cloud-messaging

react-ssr

razzle