Question

我在SO上看过其他类似问题的帖子，但是试图按照调试每个帖子的讨论，在这些错误出现的框架中，但我无法弄清楚如何解决问题反应。

当我尝试加载本地版本时收到此错误消息。

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)

registerPage是由某人编写的，他无法使其正常工作。在我扔掉它之前，我试图看看我是否可以调试问题。当我评论此页面时，页面加载。所以这个问题与这个页面上的内容有关。

registerPage有：

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));

任何人都可以看到这种类型错误的原因是什么，或者如何弄清楚这意味着什么？

Answer 1

这不是解决方案，而是跟踪此问题的个人方式。

在webpack.dev中配置sourcemap以查找术语＆＃39; new hm（npm.js：341）＆＃39;
在注册页面中禁用/注释掉redux部分，查看错误是否仍然存在，如果没有错误，行动/减速器是错误的，如果是，请转到步骤2
使用console.log检查传递到注册页面的父级的道具/状态

只需2美分。祝你好运！

React：Uncaught TypeError：无法读取属性＆＃39; app＆＃39;未定义的

1 个答案: