Nutty Programmer Nutty Programmer - 6 months ago 35
Javascript Question

React syntax error while converting jsx to js using Gulp

I am trying a simple demo mailbox app using angular and react.

main.jsx

angular.module('MailboxApp',['ui.router'])
.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/inbox');
$stateProvider.state("inbox",{
url:'/inbox',
controller: function ($scope, messageStore, $element) {

var MessageList = React.createClass({
render: function () {
return (
<div>
<h2>{this.props.messages.length} Unread Messages</h2>
<table>
<thead>
<th>Sender</th>
<th>Subject</th>
<th>Date</th>
</thead>
{this.props.messages.map(function(m,i){
return (
<tr key={i}>
<td>{m.sender}</td>
<td>{m.subject}</td>
<td>{m.date}</td>
</tr>
)
})}
</table>
</div>
)
}
});

var messages = messageStore.getMessages();

React.render(<MessageList messages={messages} />,$element[0])
}
})
.state('message',{
url:'/message/:id',
templateUrl:'partials/message.html',
controller:function($scope,messageStore,$stateParams){
$scope.message = messageStore.getMessages()
.filter(function (message) {
return message.id == $stateParams.id;
})[0];
}
})
})
.service("messageStore", function () {
var messages = [];
var sampleSize = 100;
for (var i=0; i< sampleSize; i++){
messages.push({
sender: "john.smith"+i+"@gmail.com",
date: Date.now()- i*2400000000,
id: i,
subject: "Regarding report #"+i,
body: "Hey Dan. Where's report #"+i+"?"
})
}
return {
getMessages: function(){
return messages;
}
}
})


gulpfile.js

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var browserify = require('browserify');
gulp.task('jsx', function () {
return browserify({
entries: "./main.jsx"
})
.transform(babelify)
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest("./"));
});


Error:

D:\xampp\htdocs\angular-react-demo>gulp jsx
[01:04:42] Using gulpfile D:\xampp\htdocs\angular-react-demo\gulpfile.js
[01:04:42] Starting 'jsx'...
events.js:85
throw er; // Unhandled 'error' event
^
SyntaxError: D:/xampp/htdocs/angular-react-demo/main.jsx: Unexpected token (14:28)
←[0m 12 | render←[1m:←[22m ←[36mfunction←[39m ←[34m←[1m(←[22m←[39m←[34m←[1m)←[22m←[39m ←[32m{←[39m
13 | ←[36mreturn←[39m ←[34m←[1m(←[22m←[39m
> 14 | ←[1m<←[22mdiv←[1m>←[22m
| ^
15 | ←[1m<←[22mdiv←[1m>←[22m
16 | ←[1m<←[22mh2←[1m>←[22m←[32m{←[39m←[36mthis←[39m←[1m.←[22mprops←[1m.←[22mmessages←[1m.←[22mlength←[32m}←[39m Unread Messages←[1m<←[22m←[1m/←[22mh2←[1m>←[22m
17 | ←[1m<←[22mtable←[1m>←[22m←[0m
at Parser.pp.raise (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\location.js:22:13)
at Parser.pp.unexpected (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\util.js:91:8)
at Parser.pp.parseExprAtom (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:510:12)
at Parser.pp.parseExprSubscripts (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:265:19)
at Parser.pp.parseMaybeUnary (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:245:19)
at Parser.pp.parseExprOps (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:176:19)
at Parser.pp.parseMaybeConditional (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:158:19)
at Parser.pp.parseMaybeAssign (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:121:19)
at Parser.pp.parseParenAndDistinguishExpression (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:583:26)
at Parser.pp.parseExprAtom (D:\xampp\htdocs\angular-react-demo\node_modules\babelify\node_modules\babel-core\node_modules\babylon\lib\parser\expression.js:469:19)


According to the error message, there is a syntax error on line 14, where the html starts in return statement. According to the tutorial I am studying, my code correct and it should work perfectly. Please identify the issue in my code.

Answer

I believe that you have to tell babelify to use a the react preset such as

browserify().transform(babelify.configure({
  presets: ["react"]
}));

I also believe you may need to install the preset. Via npm:

npm install --save-dev babel-preset-react
Comments