CODEWITHSUNDEEP
javascriptdecoratorecmascript-next
Istvan Orban
Istvan Orban

Reputation: 1685

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

Upvotes: 2

Views: 5472

Answers (2)

user9760669
user9760669

Reputation:

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

Upvotes: 2

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

You need transform-decorators-legacy babel plugin to make this syntax work.

Upvotes: 1

Related Questions