Uncaught TypeError: Cannot set property propTypes of function Settings(props)

Question

The prop types are working fine with normal react component but fails with Redux connected component.

Error details

Uncaught TypeError: Cannot set property propTypes of function Settings(props)

Complete error details

Uncaught TypeError: Cannot set property propTypes of function Settings(props) { _classCallCheck(this, Settings);

var _this = _possibleConstructorReturn(thi...<omitted>... } which has only a getter
at Object.eval (Settings.js?384b:533)
at eval (Settings.js:509)
at Object../src/Navigation/Components/Settings.js (main.b2f70c3c5e2d43b8884a.js?b2f70c3c5e2d43b8884a:14403)
at __webpack_require__ (main.b2f70c3c5e2d43b8884a.js?b2f70c3c5e2d43b8884a:725)
at fn (main.b2f70c3c5e2d43b8884a.js?b2f70c3c5e2d43b8884a:102)
at eval (routes.js?5665:15)
at Object../src/routes.js (main.b2f70c3c5e2d43b8884a.js?b2f70c3c5e2d43b8884a:14763)
at __webpack_require__ (main.b2f70c3c5e2d43b8884a.js?b2f70c3c5e2d43b8884a:725)
at fn (main.b2f70c3c5e2d43b8884a.js?b2f70c3c5e2d43b8884a:102)
at eval (index.js?b635:2)

I am using prop-types v15, react v16, react-redux v3 lib's.

Settings.js Component:

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import React, { Component } from 'react';

class Settings extends Component {
constructor(props) {
    super(props);
}

static get propTypes() {
    return {
      loginId:React.PropTypes.string,
      loading: React.PropTypes.bool,  
      updateEmail: React.PropTypes.func
    }
  }

render(){
   return(
      <div>{this.props.text}</div>
   )
  }
}

function mapStateToProps(state) {
   let text = "Hello Settings";
   return {
      text
   }
}

Settings.propTypes = {
    loginId: PropTypes.string,
    loading: PropTypes.bool
  }

export default connect(mapStateToProps, null)(Settings);

Maybe, that's due to mapStateToProps? You return undefined in that function. — Bartłomiej Gładys
Sorry it was my mistake. It fails even after returning text in mapStateToProps. Updated my code. — Hemadri Dasari
Sorry It was my mistake. I haven't removed the old static get propTypes and thats why it was failing. The issue got resolved After removing static get propTypes. Sorry for providing less Information. Thanks for your time. — Hemadri Dasari

Joey Gough Joey Gough · Accepted Answer · 2018-07-23T14:43:48

mapStateToProps is meant to send variables from the redux store to the react component.

But you are using it to just set a prop.

But, in line with the comment from Bartek, you could try this:

const mapStateToProps = state => {
    return {
        text: "hello settings"
    }
}

The way you should use mapStateToProps is more like this:

const mapStateToProps = state => {
    return {
        text: state.text
    }
}

Uncaught TypeError: Cannot set property propTypes of function Settings(props)

1 Answers