Estoy desarrollando un gatsby-pwa con fcm incorporado. Mientras trato de inicializar la instancia de mensajería en mi archivo firebase.js, recibo el error WebpackError: ReferenceError: IDBIndex no está definido.
//firebase.js import app from "gatsby-plugin-firebase-v9.0" import { getFirestore } from "firebase/firestore"; import { getMessaging } from "firebase/messaging" export const db = getFirestore(app); export const messaging = getMessaging(app);Curiosamente, si creo un comentario sobre la constante de mensajería, puedo compilar sin problemas ni advertencias. ¿Cómo puede suceder esto si no sucede con el db const ya que este se inicializa perfectamente?
Atentamente
Tomás
Este es un problema común con Firebase (y otros módulos de terceros) y la causa del problema es el SSR (Representación del lado del servidor). Donde el código se compila en el servidor Node pero se dirige a la web (usando window u otros objetos globales generados ).
Puede omitir este problema agregando el siguiente fragmento en gatsby-node.js :
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => { if (stage === 'build-html') { actions.setWebpackConfig({ externals: getConfig().externals.concat(function(context, request, callback) { const regex = /^@?firebase(\/(.+))?/; if (regex.test(request)) { return callback(null, 'umd ' + request); } callback(); }) }); } };Básicamente, esto excluye que firebase se empaquete, por lo que el cliente los cargará en el tiempo de ejecución, según se solicite.
Siguiendo el mismo enfoque, puede cargar de forma diferida o importar dinámicamente Firebase con:
import('firebase').then(firebase => { firebase.initializeApp({ /* firebaseConfig goes here */}); firebase.firestore().collection('someCollection').doc('someID').get() .then(doc => { // do stuff with Firestore data }); }); ¿Ha considerado usar algún service-worker como gatsby-plugin-firebase-messaging .
Siguiendo su enfoque, parece ser necesario para manejar objetos de respuestas de mensajes de Firebase como:
const messaging = firebase.messaging();Fuente: https://github.com/gatsbyjs/gatsby/discussions/27726