Eslint-plugin-react: "static propTypes = { ..." showing error.

Created on 18 May 2017  路  7Comments  路  Source: yannickcr/eslint-plugin-react

My code is as below, but pops error:''parsing error:unexpected token =; static proptypes =".
Eslint-plugin-react doesn't support this?
Anyone knows how to fix this?

export default class IconButton extends Component {

    constructor(props) {
        super(props);
        this.state = {
            buttonPressed: false,
            disabled: false,
        }
    }

    static propTypes = {
        style:View.propTypes.style,
        disabled: PropTypes.bool,
        onPress: PropTypes.func,
        normalImage: PropTypes.string,
        pressedImage: PropTypes.string,
        disabledImage: PropTypes.string,
    }

    static defaultProps = {
        style:null,
        disabled:false,
        onPress: null,
        normalImage: 'Loading',
        pressedImage: '',
        disabledImage: '',
    }

Most helpful comment

Just adding in my 2 cents, with the config that's working for me:

// .eslintrc
{
    "plugins": ["babel"],
    "parser": "babel-eslint"
}
// .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

Hence, you need the following dependencies:

With Yarn:

$ yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ yarn add eslint babel-eslint eslint-plugin-babel eslint-plugin-react

With NPM:

$ npm i --save @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ npm i --save eslint babel-eslint eslint-plugin-babel eslint-plugin-react

All 7 comments

That seems like you just haven't configured babel to handle class properties - remember that it's not part of the spec yet, it's a stage 2 proposal.

Thanks for your quick response.
Yes, this syntax hasn't been supported by eslint yet. I found a way to solve this, just installed babel-eslint and the error is gone.
Thanks anyway.

Happy to hear you solved your problem.
Closing this since it is not a problem with eslint-plugin-react itself.

i solved this after added plugins to my .babelsrc , here is the link https://babeljs.io/docs/plugins/transform-class-properties/

I tried both these solutions, but neither of them worked for me.

Just adding in my 2 cents, with the config that's working for me:

// .eslintrc
{
    "plugins": ["babel"],
    "parser": "babel-eslint"
}
// .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

Hence, you need the following dependencies:

With Yarn:

$ yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ yarn add eslint babel-eslint eslint-plugin-babel eslint-plugin-react

With NPM:

$ npm i --save @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ npm i --save eslint babel-eslint eslint-plugin-babel eslint-plugin-react

@wilsonmsalberto thank you very much, you solve the problem

Was this page helpful?
0 / 5 - 0 ratings