Adrian Garcia Adrian Garcia - 5 months ago 60
Javascript Question

Server side SyntaxError Unexpected Identifier when using a file with es6

I have a good idea as to why I'm getting this error but don't know what the best solution is. When I try to require or import the range_date.js or anything with es6 on it from the server I get Syntax errors. This does not happen when import the same file inside the app directory. Both server and app have their own main.js files and they are not made the same. So the root of the problem is there.

I was following a tutorial in pluralsight and the server side did not plan to use any es6 but I found a need to use it.

What is the best solution for this? Do I have to do something to the gulp file? the server main.js file, or move the database.js inside app? or even recreate range_date.js in a way that the server side can understand it?

Gulpfile.babel

var gulp = require('gulp');
var LiveServer = require('gulp-live-server');
var browserSync = require('browser-sync');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task('live-server', function(){
var server = new LiveServer('server/main.js');
server.start();
})

gulp.task('bundle',['copy'], function(){
return browserify({
entries:'app/main.jsx',
jquery : 'jquery-browserify',
debug:true,
})
.transform(babelify,
{
"presets": ["es2015", "react", "stage-1"],
"plugins": ["transform-decorators-legacy", "transform-function-bind"],
extensions: [".jsx", ".js",]
})
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./.tmp'));
})

gulp.task('copy', function() {
gulp.src(['app/*.css', 'app/Icons/**/*','app/stores/**/*', 'app/helper/**/*', 'app/dispatcher.js','bundle.js', 'app/helpers/RestHelper.js',
'app/actions/OperationActionCreator.jsx', 'app/actions/SurgeonActionCreator.jsx',
'app/actions/PatientActionCreator.jsx','app/actions/ORActionCreator.jsx', 'server/database.js',
'node_modules/guid/guid.js','node_modules/jquery/**/*', 'bower_components*/**/*'])
.pipe(gulp.dest('./.tmp'));
})

gulp.task('serve', ['bundle', 'live-server'], function(){
browserSync.init(null,{
proxy:"http://localhost:7777",
port: 9001
})
})

gulp.run('serve')


Server main.js

var express = require('express');

var app = new express();

var parser = require('body-parser');

var React = require('react');

var Operation = require('./models/Operation.js');

require('babel-register');

require('./database.js');

app.get('/', function(req, res) {
res.render('./../app/index.ejs', {})

// var application =
// React.createFactory(require('./../app/components/OperationList.jsx'));

// Operation.find(function(error,doc){
// var generated = React.renderToString(application({
// items:doc
// }));
// res.render('./../app/index.ejs',{reactOutput:generated});
// })

})
.use(express.static(__dirname + '/../.tmp'))
.listen(7777);

app.use(parser.json());
app.use(parser.urlencoded({extended:false}));

require('./routes/operations.js')(app);


app/components/src/range_date.js

import moment from 'moment-timezone'

export default class RangeDate {
constructor(date = null) {
if (date) {
this.date = date instanceof RangeDate ? moment(date.value()) : moment(date)
} else {
this.date = moment()
}
}

toString() {
return this.date.format('MMMM D, YYYY')
}

toCal() {
return this.date.format('MMM[\n]M/D')
}

toRef() {
return this.date.format('YYYY-MM-DD')
}

value() {
return this.date._d
}

advance(increment, amount) {
return new RangeDate(
this.date.clone().add(amount, increment)
)
}
}


server/database.js

var mongoose = require('mongoose');
...
var RangeDate = require('./../app/components/src/range_date')

mongoose.connect('mongodb://####', function(){

var today = new Date()
var operations = [{
operationName: "Operation",
patientName: "Adrian Garcia",
typeOfSurgery: "Open Heart",
id: 'foobar',
title: 'Do this',
startDate: today.advance('days', 1).toRef(),
duration: 5,
resource: 'One'
})
...
})

Answer

I just ended up creating another range_date.js that was not using es6

var moment = require('moment-timezone')
var react = require('react')

module.exports = function RangeDate(date) {
    if (date) {
        this.date = date instanceof RangeDate ? moment(date.value()) : moment(date)
    } else {
        this.date = moment()
    }

this.toString = function() {
    return this.date.format('MMMM D, YYYY')
}

this.toCal = function() {
    return this.date.format('MMM[\n]M/D')
}

this.toRef = function() {
    return this.date.format('MMMM D, YYYY, HH:mm:ss')
}

this.value = function() {
    return this.date._d
}

this.advance = function(increment, amount) {
    return new RangeDate(
        this.date.clone().add(amount, increment)
    )
}
}