Error messages are not helpful

[atombender]

Not sure if this is 6to5 or 6to5-browserify. At any rate, errors in processed files are reported with no information about the file; this is what I get:

Error: Line 8: Unexpected reserved word
at throwError (/srv/homeland/dev/node_modules/esprima/esprima.js:1831:21)
at throwUnexpected (/srv/homeland/dev/node_modules/esprima/esprima.js:1880:17)
at parsePrimaryExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2180:17)
at parseLeftHandSideExpressionAllowCall (/srv/homeland/dev/node_modules/esprima/esprima.js:2275:61)
at parsePostfixExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2325:16)
at parseUnaryExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2384:20)
at parseBinaryExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2473:16)
at parseConditionalExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2533:16)
at parseAssignmentExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2559:23)
at parseExpression (/srv/homeland/dev/node_modules/esprima/esprima.js:2585:16)

As you can guess, it's pretty hard to determine where the error is coming from.

[sebmck]

Latest 6to5 doesn't use esprima. Can I have some steps to reproduce and the browserify command and node/6to5 version?

[atombender]

Hm, I just realized that this must be coming from reactify. It's impossible to see this given the unhelpful stack trace. Any ideas?

browserify --debug -t [ reactify --es6 ] -t envify -t brfs --extension .jsx app.js

This halts at the first class definition it encounters. Browserify is usually good at reporting the right location, but not in this case. (Browserify 4.2.3.)

[sebmck]

It'd likely be coming from another of your browserify transformers, I looked at all the ones listed and all of them appear to use esprima-fb which is bleeding-edge esprima and contains ES6 support. Also 6to5-browserify doesn't appear in your command so how is it being ran?

6to5 actually comes with a jsx and react transformer so you actually don't need to use reactify at all.

[atombender]

I didn't know that 6to5 had those transformers. Thanks.

It was just an example that will fail on the first transformer, the complete line would be:

browserify --debug -t [ reactify --es6 ] -t 6to5-browserify -t envify -t brfs --extension .jsx app.js

Is there anything I need to do to make 6to5-browserify look at .jsx files? Because if I do just:

browserify --debug -t 6to5-browserify --extension .jsx app.js

then ES6 syntax in .js will be correctly transpiled, but not .jsx files.

Hang on, your JSX transformer requires the /** @jsx React.DOM */ annotation? I thought that was going away; React doesn't require it for .jsx files. Our files aren't annotated that way.

[sebmck]

No it doesn't require that annotation, it'll automatically default to it. 6to5-browserify will transform whatever file it's given so there's no reason that it shouldn't work given the --extension .jsx argument.

[sebmck]

Just run a test with the command browserify --debug -t 6to5-browserify --extension .jsx app.js with this code and it produced the correct output.

[atombender]

I had managed to upgrade 6to5 but not 6to5-browserify, and it was a couple of patch versions behind. That was all. Sorry, and thanks for the help!

By the way, I think your JSX annotation check is too strict:

var JSX_ANNOTATION_REGEX = /^\*\s*@jsx\s+([^\s]+)/;

Facebook's sources seem to use two asterisks:

/** @jsx React.DOM */

[sebmck]

No problem! That regex actually exactly matches that comment, it's ran against the actual contents.

[atombender]

D'oh. Of course.