TypeError in server bundle with firebase/app

[akaufmann]

If you use Firebase and import firebase/app via import firebase from 'firebase/app'
an error is thrown during a build:

/<path/to/the/project>/__sapper__/dev/server/server.js:109
  if (self.fetch) {
           ^

TypeError: Cannot read property 'fetch' of undefined
    at /<path/to/the/project>/__sapper__/dev/server/server.js:109:12
    at Object.<anonymous> (/<path/to/the/project>/__sapper__/dev/server/server.js:573:3)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
    at startExecution (internal/bootstrap/node.js:276:5)
> Server crashed

This is because Firebase uses isomorphic-fetch and therefore whatwg-fetch is also in the bundle
(this line of code of whatwg-fetch is the reason why self is not defined in the server bundle...

})(typeof self !== 'undefined' ? self : undefined);

...).

I am not sure whether this issue can be prevented within Sapper.

firebase: 5.7.2
sapper: 0.25.0-alpha2
svelte: 3.0.0-alpha15

[antony]

I encountered this error too. I don't think it is an issue for Sapper, it's more an issue with the way that firebase bundles, which is not ideal.

I ended up using the CDN URLs, but I think this bug is better raised with firebase.

[akaufmann]

Unfortunately I think it has something to do with the combination Rollup+Sapper :(
We switched to Marko and it works there. We also had success with Next.js. That doesn't mean that an adjustment to Firebase won't improve it for Sapper. Unfortunately I can't look any further what the cause could be but I hope that there will be a solution for Sapper for those who want to use it with Firebase.

[monsieurBoutte]

any update on this? It's currently blocking development for me. I tried pulling in firebase as a cdn instead but no luck 😞

[monsieurBoutte]

@antony could you share how you pulled in firebase via cdn?

[antony]

@monsieurBoutte sadly I lost the codebase. I basically just imported firebase from cdn using script tags - i.e. didn't bundle it.

[mikenikles]

It looks like a fix will be released soon in the Firebase SDK. There's also a workaround by using the canary release. See firebase/firebase-js-sdk#1754 (comment)