Как исправить self не определен, когда метод обмена сообщениями firebase вызывается в приложении React ssr?

Question

Я пытаюсь использовать Firebase Massaging в своем приложении SSR, которое создается с использованием 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). Я получил идею из этого поста. Когда я столкнулся с этой проблемой с nuxt.js, я смог проверить наличиеwindow с этим process.browser. Надеюсь это поможет!