React with Firebase authentication

Question

I'm trying to set up react with firebase authentication.

There is a problem with the registration page. When I comment out the registration page, my local page renders without any issues. When I uncomment this page, I get an error that says:

npm.js:341 Uncaught TypeError: Cannot read property 'app' of undefined
    at new hm (npm.js:341)
    at Object.<anonymous> (RegisterPage.js:12)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at Object.defineProperty.value (AppRouter.js:10)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at Object.<anonymous> (app.js:7)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at Object.<anonymous> (bundle.js:50999)
    at __webpack_require__ (bootstrap 5a6a0f74168ebcba0a5a:19)
    at module.exports (bootstrap 5a6a0f74168ebcba0a5a:62)

I have tried to recreate the minimum part of the app in this code sandbox: https://codesandbox.io/s/6w2r0267kk. However, I am getting an error in code sandbox that says: TypeError - Could not fetch dependencies, please try again in a couple seconds: Failed to fetch. This error takes about 2 hours to appear each time, and has repeated 3 times now. I'm not sure if I'm doing something wrong in trying to use that tool.

Others who have encountered the same error message as me have suggested that 'this' may not be correctly defined: Uncaught TypeError: Cannot read property 'app' of undefined

For me, that const is assigned in row 22. Searching further into that line of enquiry, people note that this is an ES5 expression that should be updated for ES6 - and then leads down a path of reasoning that suggests this isn't a useful method to use in ES6. I'm not sure if trying to figure that out is part of the process toward a solution for me.

When I just use the code sandbox on the Register Page, a syntax error in the return statement that starts at line 78 is indicated, but I can't see what's wrong with that.

Can anyone help with examples of how to get started with Firebase authentication in react (with a pending flag on user sign ups). I didn't write this code myself and struggle to understand the basics at the best of times, so I'd like to try to figure this out as a learning exercise, but if it's not a sound basis, then I'd also appreciate that advice.

Answer 1

The error is because you are not exporting/importing your firebase auth object properly.

Print the auth variable imported on line 4 of RegisterPage.js and you'll see it is undefined:

import { firebase, auth } from "../../firebase/firebase";

Check the path is correct and that the default export from firebase.js has an auth property.