React: Uncaught TypeError: Cannot read property 'app' of undefined

Question

I have seen other posts on SO with a similar problem, but have tried to follow the discussion around debugging each of those, in the frameworks those errors appear in, but I can't figure out how to solve the problem in react.

I am getting this error message when I try to load my local version.

npm.js:341 Uncaught TypeError: Cannot read property 'app' of undefined
    at new hm (npm.js:341)
    at Object.<anonymous> (RegisterPage.js:14)
    at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
    at Object.<anonymous> (AppRouter.js:12)
    at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
    at Object.<anonymous> (app.js:4)
    at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
    at Object.<anonymous> (bundle.js:50995)
    at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
    at module.exports (bootstrap e6e64bf0867d646d6dec:62)

The registerPage was written by someone, who was not able to get it working. Before I throw it out, I'm trying to see if I can debug the problem. When I comment this page, the page loads. So the problem has something to do with what's on this page.

The registerPage has:

import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { firebase, auth } from '../../firebase/firebase'
import * as firebaseui from 'firebaseui';
import authHelper from '../../services/authHelper'

// This component displays the FirebaseUI widget.
// On succcessful singup / singin it sets the user auth state
// and redirects to appropriate page.

const authUi = new firebaseui.auth.AuthUI(auth);

const pageStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
};

class RegisterPage extends React.Component {
  componentDidMount() {
    const self = this;
    const uiConfig = {
      callbacks: {
        signInSuccessWithAuthResult: function (authResult, redirectUrl) {
          // Do something with the returned AuthResult.
          const authUser = authResult.user;
          const credential = authResult.credential;
          const isNewUser = authResult.additionalUserInfo.isNewUser;
          const operationType = authResult.operationType;
          if (isNewUser) {
            // this is a new sign up.
            // create user and display pending message
            authHelper.createNewUser(authUser)
              .then(() => self.props.history.push('/Pending'))
          }
          else if (operationType === 'signIn') {
            authHelper.getUser(authUser.uid)
              .then(snapshot => {
                const user = snapshot.val()
                if (user) {
                  if (!user.pending) {
                    //mark the user as approved and redirect to dashboard
                    const { onSetAuthUser } = self.props
                    authUser.approved = true;
                    onSetAuthUser(authUser);
                    self.props.history.push('/Dashboard')
                  } else {
                    //not approved, show pending message
                    self.props.history.push('/Pending')
                  }
                } else {
                  console.error(`could not find user in db for user uid: ${authUser.uid}`)
                }
              })
          }
          // Return type determines whether we continue the redirect automatically
          // or whether we leave that to developer to handle.
          return false;
        },
      },
      'credentialHelper': firebaseui.auth.CredentialHelper.NONE, // turn off account chooser
      signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
    };
    authUi.start('#firebaseui-auth', uiConfig);
  }
  componentWillUnmount() {
    if (authUi) {
      authUi.reset();
    }
  }
  render() {
    // just renders the firebase ui widget
    return (<div style={pageStyle}><div id="firebaseui-auth"></div></div>)
  }
};


// set up passing of store actions as component props
const mapDispatchToProps = dispatch => ({
  onSetAuthUser: authUser => dispatch({ type: 'AUTH_USER_SET', authUser }),
});
// connect this component to the store
export default withRouter(connect(undefined, mapDispatchToProps)(RegisterPage));

Can anyone see what the cause of this type error might be, or how to go about figuring out what it means?

There are nearly 1700 results for a search for react cannot read property of undefined here. You've read them and determined that not a single one of them can help you solve this problem? — Ken White
Hi @KenWhite - thanks. I've spent 3 full days reading posts here and on other platforms to try to figure this out. I'm asking, because I can't use those posts to identify how to get to a solution. I continue to search for information that may help solve the problem and have posted this question because I'm stuck. Clearly, I'm not as bright as you. — Mel
lol i feel your pain. since there isn't even anything referring to .app in this file (meaning it's another file or it's a dynamic prop being created) I would say...remove your node_modules folder and run npm install --force. But that's just blind troubleshooting to start, have fun :) — Deryck
Thanks @Deryck - I gave up trying to find the problem and started with a fresh branch. I understand why people don't like working with other people's code so much better because of this problem, but I didn't find a solution. Thanks just the same. — Mel

Yuanpeng.Zheng Yuanpeng.Zheng · Accepted Answer · 2018-04-29T14:19:10

This is not a solution, but personal way of tracking this.

config sourcemap in webpack.dev to find the term 'new hm (npm.js:341)'
disable/comment out redux parts in register page, see if the error still exists, if no error, sth wrong with action/reducer, if yes, go to step 2
use console.log to check props/state of parent passing to register page

Just my 2 cents. Good luck!

React: Uncaught TypeError: Cannot read property 'app' of undefined

1 Answers