Search code examples
javascriptdecoratorecmascript-next

Decorator feature not working (unexpected token)

Just tried to use decorators in React:

import React from 'react';
import Fade from './Transitions/Fade'
import withVisible from './withVisible'

@withVisible()
const App = props =>
    <Fade visible={props.visible} duration={500}>
        Hello
    </Fade>

export default App

If I use the common way ( withVisible()(App) ) then it's working properly. (My guess is that NodeJS can't compile my code with the @ ) [Syntax error: Unexpected token (@) ]

import React from 'react'

const withVisible = () => Component =>
    class WithVisible extends React.Component {
        state = {
            visible: true
        }
        render() {
            return (
                <Component visible={this.state.visible} {...this.props}/>
            )
        }
    }

export default withVisible
Solution

  • Probably your .babelrc do not have added decorator plugin. Try this: https://babeljs.io/docs/plugins/transform-decorators