Code highlighting broken in PhpStorm/WebStorm with React HOC's and decorators

Question

Background

When writing a Higher-order component in react that contains a decorator my highlighting is broken in PhpStorm/WebStorm.

Example Code

export default function HOC(WrappedComponent) {
    return (
        @connect(
            state => ({
                data: state.data
            })
        )
        class extends Component {/** react component **/}
    )
}

The Error

This piece of code compiles perfectly in my react application but causes a whole bunch of errors in my IDE.

If I remove the decorator the errors go away. But if I use decorators on other components there is no problem with the highlighting. Meaning that it is not a global issue with decorators.

The first error flagged is

) expected, line 19 (where line 19 is the end of the decorator)

This means its that the return statement does not understand the grouping of the decorator and the component correctly.

Question

Is there a way to fix this issue easily, maybe a library. Or should I change the way I write these HOCs?

Joe Lloyd Joe Lloyd · Accepted Answer · 2017-09-04T20:00:25

A Problem with the IDE

As stated above this code compiles and runs, there for there is some kind of issue with the IDE and how it detects something that returns decorators.

The Workaround

There was a work around that I used to fix the code highlighting. By Allowing the decorator to be applied to the class before the return and adding an arbitrary name the highlighting returns.

Example

export default function HOC(WrappedComponent) {

    @connect(
        state => ({
            data: state.data
        })
    )
    class HOC extends Component {/** react component **/}

    return HOC;
}