I use WebStorm for React JS and I'm getting this 'Unresolved variable warning' by all props.

But everything works without problems, language is defined, it exists. Code works, I don't have any issues with my app.

This is what I have inside Languages & Frameworks > JavaScript > Libraries

Any idea how to avoid those warnings?

UPDATE

Code example where that happens. First parent ponent :

import ExpirationTimer from '../../mon/expirationTimer';

export default class ListView extends React.Component {
    render (){
        const language = this.props.language;
        let expirationDate = "Wed May 10 2017 15:58:59 GMT+0200";

        return (
            <div>
                <ExpirationTimer expirationDate={expirationDate} language={language}/>
            </div>
        )
    }
}

Where language is an object {lowestPrice: "Lowest price", mileage: "Mileage", ....}

And then the ponent where I try to get those props, it works, but I get warning that they are unresolved :

 export default class ExpirationTimer extends React.Component {
    constructor(props){
        super(props);

        this.state = {                
            expirationDate: this.props.expirationDate // Here I get the warning
        };
    }

    render(){
        let language = this.props.language; // Here I get the warning


        return (
            <div>
                .....
            </div>
        );
    }
}

I use WebStorm for React JS and I'm getting this 'Unresolved variable warning' by all props.

But everything works without problems, language is defined, it exists. Code works, I don't have any issues with my app.

This is what I have inside Languages & Frameworks > JavaScript > Libraries

Any idea how to avoid those warnings?

UPDATE

Code example where that happens. First parent ponent :

import ExpirationTimer from '../../mon/expirationTimer';

export default class ListView extends React.Component {
    render (){
        const language = this.props.language;
        let expirationDate = "Wed May 10 2017 15:58:59 GMT+0200";

        return (
            <div>
                <ExpirationTimer expirationDate={expirationDate} language={language}/>
            </div>
        )
    }
}

Where language is an object {lowestPrice: "Lowest price", mileage: "Mileage", ....}

And then the ponent where I try to get those props, it works, but I get warning that they are unresolved :

 export default class ExpirationTimer extends React.Component {
    constructor(props){
        super(props);

        this.state = {                
            expirationDate: this.props.expirationDate // Here I get the warning
        };
    }

    render(){
        let language = this.props.language; // Here I get the warning


        return (
            <div>
                .....
            </div>
        );
    }
}

• javascript
• reactjs
• webstorm

Share Improve this question Follow edited Nov 28, 2016 at 10:07 LazyOne 166k4848 gold badges414414 silver badges415415 bronze badges asked Nov 28, 2016 at 9:22 BokyBoky 12.1k3030 gold badges101101 silver badges171171 bronze badges 4

• Could you paste in a small snippet of code that this is happening on so I can recreate the file in webstorm and see what I see in mine? – Joshua Terrill Commented Nov 28, 2016 at 9:28
• 2 Looks like this is a known issue that still hasn't been resolved yet :( – Joshua Terrill Commented Nov 28, 2016 at 9:50
• 2 to me, the errors go away when I disable react-definitely typed in Libraries – lena Commented Nov 28, 2016 at 13:42
• 2 note that pletion/resolving only works for ponents with explicit propTypes declaration only - youtrack.jetbrains./issue/WEB-18816#ment=27-1415798 – lena Commented Nov 28, 2016 at 13:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

use destructuring assignment: let {language} = this.props instead let language = this.props.language;