Gatsby: Gatsby v1 + Firebase 5.0.+, unable to import

[AAverin]

Description

Unable to import firebase into the project.
Also discussed here: https://github.com/gatsbyjs/gatsby/issues/8612
Due to fetch polyfill being present in firebase sources, production build results in

WebpackError: self is not defined

  - fetch.umd.js:8
    ~/whatwg-fetch/dist/fetch.umd.js:8:1

  - fetch.umd.js:2 support.searchParams
    ~/whatwg-fetch/dist/fetch.umd.js:2:1

  - fetch.umd.js:5 Object.defineProperty.value
    ~/whatwg-fetch/dist/fetch.umd.js:5:2

  - index.cjs.js:3 Object.<anonymous>
    ~/@firebase/polyfill/dist/index.cjs.js:3:1

  - index.cjs.js:5 Object.<anonymous>
    ~/firebase/app/dist/index.cjs.js:5:1

  - index.js:8 Object.exports.__esModule
    src/layouts/index.js:8:16

Steps to reproduce

Setup Gatsby v1 with latest Firebase 5.0.+ and observe an error when trying to run the code

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.279 => 1.9.279
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-google-analytics: ^1.0.20 => 1.0.31
    gatsby-plugin-i18n: ^0.4.1 => 0.4.2
    gatsby-plugin-react-helmet: ^1.0.8 => 1.0.8
    gatsby-plugin-react-next: ^1.0.11 => 1.0.11
  npmGlobalPackages:
    gatsby-cli: 2.4.4

[AAverin]

https://stackoverflow.com/questions/53130971/gatsbyjs-firebase-initializeapp-is-not-a-function/53132347#53132347

[kakadiadarpan]

@AAverin can you provide a reproduction repo for this?

[kakadiadarpan]

Also, can you try upgrading your repo to Gatsby v2 and check if that solves the problem for you?

[AAverin]

I took me quite some time, but I managed to build Firebase 4 with gatsby 1.
The root of the problems are changes in whatwg-fetch implementation in version 2.0.4, there was a big refactoring there.

I rolled back versions of Firebase until I found one that still uses 2.0.3 implementation.

I would suspect that just using whatwg-fetch will result in same exception when building production gatsby v1.

As for gatsby v2, there is already a repo that shows that v2 is working fine.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[AAverin]

I believe issue is still not resolved