React Router Link params. Unexpected character '`'. in uglify and eslint

Question

I am getting unexpected character '`' when using gulp uglify & eslint both.

<td><Link to={`/user/${u.userId}`}>{u.UserName}</Link></td>

In gulp file

Gulp.task('js', function(){
    Browserify(GulpConfig.paths.mainJs, { debug: (production() ? false : true)})
        .transform(Reactify)
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(Source('bundle.js'))
        .pipe(production(Buffer()))
        .pipe(production(Uglify().on('error', gulpUtil.log)))
        .pipe(Gulp.dest(GulpConfig.paths.dist + '/scripts'))
        .pipe(Connect.reload());
});

How to handle it?

Answer 1

The use of ES6 template strings require you to transpile your code through a tool like Babel, which you're not doing currently.

However since you're using reactify you can add the option {"es6": true} in order to take part in some of the ES6 features such as arrow function or template strings.

.transform(Reactify, {es6: true})

The entire feature set that reactify currently supports are arrow functions, rest params, templates, object short notation and classes.

If you plan on doing React and ES6 for the long haul I certainly recommend using Babel as your one-stop-shop instead of doing all that jazz with browserify, reactify, both which are awesome tools and has helped me tremendously in the past.