@ decorator in component breaks build

[gerwinbrunner]

I have a simple component which uses @radium decorators

import React from 'react';
import { NavItem } from 'rebass';
import Icon from 'react-geomicons';
import Radium from 'radium';

@Radium
export default class StatusIndicator extends React.Component {
  checkStatus() {
    const { status } = this.props;
    // console.log('StatusIndicator',status);
    switch(status) {
      case 'OPERATION-STATE-STOPPED':
        return 'stopped';
      case 'OPERATION-STATE-REGULATING':
        return 'regulating';
      default:
        return 'warning';
    }
  }
}

When storybook tries to run it throws this error

ERROR in ./imports/ui/components/StatusIndicator.jsx
Module build failed: SyntaxError: Unexpected token (6:0)

  4 | import Radium from 'radium';
  5 | 
> 6 | @Radium
    | ^
  7 | export default class StatusIndicator extends React.Component {
  8 |   checkStatus() {
  9 |     const { status } = this.props;

 @ ./stories/StatusIndicator.js 11:23-78

Any idea how to solve this?

[thani-sh]

Hi @gerwinbrunner, can you try adding a custom .babelrc file (more info)

[arunoda]

As thanish mentioned we don't support this. Add a stage-0 babel preset as mentioned on the docs.

Or radium has a way to use without decorators.