2

Ok so I think I know why this error is happening, because firebase hasn't been initialized but I'm trying to access it, but I don't understand why because I believe I initialize it in my index.html. Thinking its an order of operations /async thing?

Anyways I am deploying to Firebase Hosting, so according to their website

Initialize Firebase in your app (no need to include your Firebase config object when using reserved Hosting URLs):

I should be able to put <script src="/__/firebase/init.js"></script> below my SDK loading to initialize firebase. What I don't understand is if this actually initializes a firebase app the same way that the line firebase.initializeApp() does? Basically I think my issue is either that script does indeed initialize a firebase app for me, and I am just trying to access it in my react function before its done, or I need to run firebase.initializeApp() separately.

Trying to implement FirebaseUi for auth on react as correctly as possible.

Brandon Ferrell
  • 101
  • 8
  • Please share your entire code... – Yair Cohen Jul 26 '20 at 04:33
  • @YairCohen Don't think I can edit anymore, but [here](https://imgur.com/a/U8BImJh) is an imgur link to what I believe are the relevant parts of my code. – Brandon Ferrell Jul 26 '20 at 04:46
  • I'm not certain if that's the problem but try putting the full config code like the example here: https://firebase.google.com/docs/web/setup#config-object If that doesn't work, I'd try to initialize Firebase somewhere else, perhaps like this example: https://stackoverflow.com/questions/48492047/where-do-i-initialize-firebase-app-in-react-application – Yair Cohen Jul 26 '20 at 05:01

1 Answers1

0

React.useEffect(), per its name is a side effect, which does not guarantee it'll run prior to it's render.

See https://codesandbox.io/s/holy-water-ni9ut?file=/src/App.js as an example - render, render, then effect. In fact, it doesn't even get called prior to rendering.

Some notes:

  • firebase.initializeApp should be called prior to ReactDOM.render() being called (as per comments)
  • useEffect must have dependencies, otherwise, it will run on every render. (the firebase.auth().onStateChanged(user => setIsSignedIn(user) effect should be called with [] as the 2nd parameter`)
hrgui
  • 590
  • 2
  • 5