I have my react component and right now when I startup the server via gulp, it throws this error...
events.js:160
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/Maude/Projects/NoteTaker/src/scripts/components/notes.jsx: Unexpected token (12:6)
10 |
11 | return (
> 12 | <div>
| ^
13 | <p>hi</p>
14 | </div>
15 | );
This is what the component looks like:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
class Notes extends React.Component {
render() {
return (
<div>
<p>hi hellooo</p>
</div>
);
}
}
ReactDOM.render(<Notes />, document.getElementById('notes'))
I'm assuming it has to do with something regarding babel in my gulpfile.js , I'm just unsure of what it is. Everything else works fine... But rendering components gets weird...
const gulp = require('gulp');
const sass = require('gulp-sass');
const path = require('path');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const connect = require('gulp-connect');
// Styles
gulp.task('sass', () => {
return gulp.src('src/styles/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css'))
.pipe(connect.reload());
});
gulp.task('babel', () => {
return gulp.src('src/scripts/components/**/*.jsx')
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('app.js'))
.pipe(gulp.dest('assets/js/'))
.pipe(connect.reload());
});
gulp.task('webserver', () => {
connect.server({
livereload: true
});
});
gulp.task('watch', () => {
gulp.watch('src/styles/*.scss', ['sass']);
gulp.watch('src/scripts/components/*.jsx', ['babel']);
})
gulp.task('default', ['sass', 'babel', 'webserver', 'watch']);
What am I doing wrong?