GatsbyJS + Firebase : initializeApp is not a function

Question

I am totally stuck.

Have a setup of GatsbyJS 1 with gatsby-next and React 16 + latest Firebase 5.5.7

In develop mode everything works fine, but when I try to make a build I always get: WebpackError: _firebase2.default.initializeApp is not a function

I have already tried all of the following kinds if imports, and all of them result in this error: import firebase from 'firebase'; // const firebase = require('firebase/app') // import * as firebase from 'firebase'; var config = { ... }; firebase.initializeApp(config);

I have tried updating to the latest versions of all libraries. The only one I can't really update at the moment due to lots of migrations is GatsbyJS 2.0

Here is my package.json: "dependencies": { "@material-ui/core": "^3.2.2", "@material-ui/icons": "^3.0.1", "aws-sdk": "^2.345.0", "cookieconsent": "^3.0.6", "firebase": "^5.5.7", "firebaseui": "^3.4.1", "fsevents": "^1.2.4", "gatsby": "^1.9.279", "gatsby-link": "^1.6.46", "gatsby-plugin-google-analytics": "^1.0.20", "gatsby-plugin-i18n": "^0.4.1", "gatsby-plugin-react-helmet": "^1.0.8", "gatsby-plugin-react-next": "^1.0.11", "material-ui-chip-input": "^1.0.0-beta.8", "paypal-checkout": "^4.0.228", "react": "^16.5.2", "react-dom": "^16.5.2", "react-firebaseui": "^3.1.2", "react-intl": "^2.4.0", "reactstrap": "^6.5.0" },

For some time project was running fine on some older versions of libraries.

Answer 1

Long story short, Firebase now includes Fetch polyfill that references self internally, so it doesn't work with gatsby.

Workaround would be to not load firebase using null-loader, but then you can't reference anything firebase-related during your build time, including properties for authentication providers

Issue seems to be limited to Gatsby v1 with Firebase 5.0.+

Rolling back to older version of Firebase is not possible due to an issue with pre-gyp and node version conflicts.

Posted a bug on: https://github.com/gatsbyjs/gatsby/issues/9681