Firebase workaround

[jakobrosenberg]

Thanks to @Egnus for posting this on Discord
https://discord.com/channels/683709869626490889/684322968318509070/799076149124530197

So, for anyone searching for firebase/performance to work and having the issue of ReferenceError: IDBIndex is not defined in SSR, this is the workaround.
You have to simulate those references to skip the issues only in SSR with spassr.ssrOptions property set with beforeEval like here:

spassr({
      ...options,
      ssr: true,
      port: 5005,
      ssrOptions: {
        inlineDynamicImports: true,
        dev: true,
        beforeEval(dom) {
          class IDBDefault {} // notice this requires to be a class, not only an empty object
          dom.window.IDBIndex = IDBDefault;
          dom.window.IDBCursor = IDBDefault;
          dom.window.IDBObjectStore = IDBDefault;
          dom.window.IDBTransaction = IDBDefault;
          dom.window.IDBDatabase = IDBDefault;
        },
      },
    });

also, be sure you are loading firebase/analytics and firebase/performance with dynamic import and isSSR (mentioned above, for instance) checks:

if(!isSSR) {
  try {
    await import('firebase/analytics');
    await import('firebase/performance');
  } catch (e) {
    console.error('Could not lazy load firebase analytics or performance', e);
  }
}

lastly, you also need to tell your SSR functions in the cloud to also ignore those global dependencies so, in the case of netlify > add in api/netlify/ssr.js to your tossr() function as a 4th object parameter:

{
    beforeEval(dom) {
      class IDBDefault {}
      dom.window.IDBIndex = IDBDefault;
      dom.window.IDBCursor = IDBDefault;
      dom.window.IDBObjectStore = IDBDefault;
      dom.window.IDBTransaction = IDBDefault;
      dom.window.IDBDatabase = IDBDefault;
    },
}

[Egnus]

If anyone find a new better workaround, please mention it here.

[mizzao]

Is this just for firebase/performance or is it for use of Firebase in general?

I'm wondering if this error while using Firebase is related: roxiness/routify-starter#97

[Egnus]

It does not seem to be related.
But check this list. Only a few firebase client side modules are ready to be run inside node.js and therefore in SSR. https://firebase.google.com/docs/web/setup#namespace
In this case, Analytics, Performance, Storage, messaging and remote config cannot be loaded in SSR.
There are workarounds but your defect in the other ticket seems not to be related.

[Kimeiga]

I believe the isSSR variable referenced is populated as follows according to the discord post

  const isSSR =
    navigator.userAgent.includes("Node.js") ||
    navigator.userAgent.includes("jsdom");