Radium for React.js inline-styles unexpected token error?

Question

So I did a

     npm install radium

And it installed radium in my node modules folder (I can see it in there)

Also here is my json package that includes other installs (maybe Radium has a conflict with something else?) Here is my json package:

   {
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "babel-preset-es2015": "~6.3.13",
    "babel-preset-react": "~6.3.13",
    "babelify": "~7.2.0",
    "browserify": "~13.0.0",
    "es6-promise": "~3.0.2",
    "fs": "0.0.2",
    "gulp": "^3.9.0",
    "gulp-browserify": "~0.5.1",
    "gulp-concat": "^2.6.0",
    "gulp-load-plugins": "^1.2.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-postcss": "^6.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.1",
    "gulp-uglify": "^1.5.1",
    "node-sass": "~3.4.2",
    "radium": "^0.18.1",
    "vinyl-source-stream": "~1.1.0",
    "yargs": "^3.27.0"
  },
}

I also include radium at the top of my component file (which I realize I probably don't need to do like so

var Radium = require('radium');

So basically I'm following the radium docs and just cutting and pasting their example.

I'm also using gulp to manage all my tasks and here is how my gulpfile looks:

'use strict';
require('es6-promise').polyfill();

// Load required files that aren't auto-loaded by
// gulp-load-plugins (see below)
var argv            = require('yargs').argv,
    fs              = require('fs'),
    gulp            = require('gulp'),
    merge           = require('merge-stream'),
    minifyCss       = require('gulp-minify-css'),
    react           = require('react'),
    radium          = require('radium'),
    path            = require('path');

// Browserify specific
var babelify = require('babelify'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream');

// This will load any gulp plugins automatically that
// have this format ('gulp-pluginName' [can only have one dash])
// The plugin can used as $.pluginName 
var $ = require('gulp-load-plugins')();

// Paths
var javascriptsPath     = 'static_dev/javascripts',
    sassPath            = 'static_dev/scss';

// Get Folder Function (from paths)
function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}


// Javascript task
// If coding in Javascript, this will concat, jshint, and uglify
// Copies files to the static javascript directory
gulp.task('scripts-javascript', function() {
    var folders = getFolders(javascriptsPath);
    var tasks   = folders.map(function(folder) {
        return gulp.src(
        [
            'static_dev/javascripts/' + folder + '/caosblog.js',
        ], { base: 'static_dev/javascripts/' + folder })
            // concat files
            .pipe($.concat(folder + '.js'))
            // Check integrity
            .pipe($.jshint())
            // Remove whitespace and uglify
            .pipe($.uglify())
            // Rename the file
            .pipe($.rename(folder + '.min.js'))
            // Copy it to static folder
            .pipe(gulp.dest('static/javascripts'))
    });

    return merge(tasks);
});

// Browserify task
gulp.task('scripts-browserify', function() {
    var folders = getFolders(javascriptsPath);

    var tasks = folders.map(function(folder) {
        return browserify({
            entries: ['./static_dev/javascripts/' + folder + '/caosblog.js'],
            debug: true
        })
            .transform(babelify,  { presets: ['es2015', 'react'] })
            .bundle()
                .pipe(source(folder + '.js'))
                //.pipe($.uglify())
                .pipe($.rename(folder + '.min.js'))
                .pipe(gulp.dest('./static/javascripts/'));
    });

    return merge(tasks);
});

Notice, too, how I include radium as a requirement in my gulpfile as well, although I don't specifically include it in an actual task; do I need to include it in a task somehow?

So, now for the error, when I include this (like the docs say)

@Radium

It doesn't recognize it and says "Unexpected Token."

Answer 1

@Radium is a decorator so you need the https://babeljs.io/docs/plugins/syntax-decorators/ plugin to use them. I checked the two presets you have for Babel and it seems none of those have the decorator plugin included.

You can use decorations as normal functions so you can also wrap your components in Radium(Component) if you don't want to use the decorator syntax. Component here is the constructor function or class not the actually instance. (So not Radium()).