Gatsby build error "TypeError: Cannot read property 'split' of null" related to firebase

Description:

error message on gatsby build on Netlify: TypeError: Cannot read property ‘split’ of null

Steps to reproduce:

My code

`import React, {Component} from ‘react’;

import StyledFirebaseAuth from “react-firebaseui/StyledFirebaseAuth” import firebase from “firebase/app” import “firebase/auth”

firebase.initializeApp({ apiKey: “xxxxxx”, authDomain: “xxxxx”, databaseURL: “xxxxx”, projectId: “xxxx”, storageBucket: “”, messagingSenderId: “xxxxx”, appId: “xxxxx” })

class IndexPage extends Component { state = { isSignedIn : false, }

uiConfig = { signInFlow: ‘popup’, signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID, ], callbacks: { signInSuccessWithAuthResult : () => false } }

componentDidMount = () => { const app = import (‘firebase’) if (typeof window !== undefined) { const app = import (‘firebase’) firebase.auth().onAuthStateChanged(user => {

  this.setState({ isSignedIn: !!user })

}) } }

render() { return( <div> {this.state.isSignedIn ? ( <div>Sign In !</div>) : (

        < StyledFirebaseAuth 
    uiConfig = {this.uiConfig} 
    firebaseAuth={firebase.auth()}/>
  
)}
</div>
)

} }

export default IndexPage`

Error message on Netlify

If someone can explain me how to make this working, thanks !

[dougwithseismic]

Anyone having their builds fail because they’re calling firebase functions in client, the tl;dr that wasn’t all that obvious from here is to check for whether window exists when defining firebase, as so:

import firebase from 'gatsby-plugin-firebase'
const isBrowser = () => typeof window !== 'undefined'
const Firebase = isBrowser() ? firebase : {}

Felt it worth adding to this issue as it’s mentioned a fair bit online.

[eerrecalde]

If anyone coming over to this issue looking to fix this, I’ve got the build working with react-firebase-hooks and gatsby-plugin-firebase by replacing useAuthState from react-firebase-hooks with a custom hook as suggested here:

https://gist.github.com/jeffreymeng/78bd7f6b0f301fa5ef04359cd512222b

So if you have created the hook as in the link above, the next step would be to change the implementation as following:

import firebase from 'gatsby-plugin-firebase';
import { useAuthState } from 'react-firebase-hooks/auth';
...
const [user, userLoading] = useAuthState(firebase.auth());

import firebase from 'gatsby-plugin-firebase';
import useAuthState from '../hooks/use-auth-state'; // Changed
...
const [user, userLoading] = useAuthState(firebase); // Changed