Cannot implemet firebase

[Notaduck]

Description

I am trying to implemt firebae auth in a gatsby project but I am facing a couple of issues.

Steps to reproduce

https://codesandbox.io/s/pgdyz

Expected result

The project should build without any errors.

Actual result

If the lines regarding onCreateWebpackConfig in gatsby-node.js is outcommented do I get a fetch is not defined error which is related to the firebase package. I can "fix" that with the lines i gatsby-node.js however I can't make any references to firebase.auth and it will result in the following error:

failed Building static HTML for pages - 2.313s
error Building static HTML failed for path "/"

  24 |   }
  25 |
> 26 |   const googleProvider = new fire.auth.GoogleAuthProvider()
     |                                        ^
  27 |
  28 |   const loginWithGoogle = () => {
  29 |     firebase.auth().signInWithPopup(googleProvider)


  WebpackError: TypeError: Cannot read property 'GoogleAuthProvider' of undefined

  - index.js:26
    src/pages/index.js:26:40

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

[ascorbic]

This is probably because you're not intializing firebase during SSR. You're checking for window inside getFirebase(). You can probably fix this by moving const googleProvider = new fire.auth.GoogleAuthProvider() inside the loginWithGoogle function, or instatiating it inside a useEffect hook

[nibtime]

@Notaduck

I am circumventing such issues with dynamic imports. I just provided an answer in another discussion that shows how to do that.