Unable to convert code containing JSX

[nickmcummins]

We are using React (v15.10) and JSX and are trying to upgrade our code from ES5.1 (?) to ES6. In our pure js files, we have been able to run lebab successfully, but for anything with JSX (embedded HTML), we get an error similar to the following:

`➜ mixins lebab BootstrapTableMixins.js

/usr/local/lib/node_modules/lebab/node_modules/recast/node_modules/esprima/esprima.js:5701
throw e;
^
Error: Line 54: Unexpected token <
at constructError (/usr/local/lib/node_modules/lebab/node_modules/recast/node_modules/esprima/esprima.js:2406:21)
at createError (/usr/local/lib/node_modules/lebab/node_modules/recast/node_modules/esprima/esprima.js:2425:17)
`

How difficult would be to adapt the currently implementation to support JSX-containing files? I think all that we would want here is for it to keep such as expressions as-is instead of throwing an error.

[nene]

The problem is that Lebab uses Recast to transform the code, which in turn uses Esprima to parse the code and the official Esprima doesn't yet support JSX syntax.

The strange thing is that Esprima actually has JSX support implemented, but it's in upcoming 3.0 version which is not yet released. I have no idea when it would be ready... it has been in the making for a while and there has been just one minor 2.x release of Esprima this year.

Recast actually allows configuring it with a different Esprima-compatible parser. In theory Espree should be Esprima-comparible and support JSX, but I haven't managed to get it working so that it would not break other things (seems that Espree doesn't handle default parameters and spread operator, or it doesn't handle it the same way as Esprima; strange though I wasn't able to get JSX support working either).

It would be really nice to have JSX support. I'm open for all ideas for making it work... as I've run out of my own ones.

[nickmcummins]

It looks like the latest version of esprima (3.0.0-dev) has "experimental" support for JSX. Could I locally override the version of esprima that recast declares to this latest version?

[nene]

Seems that with a relatively few little changes we can switch to using Espree parser, which already has JSX support in official release.

Created a branch that uses Espree.

At the moment though, the JSX still doesn't work as Estraverse library doesn't support JSX nodes. However it should be fairly easy to extend Estraverse to add this support.

Perhaps I can find time to do this in the evening.

[nene]

OK, the JSX support should now be fully working.

@nickmcummins There's not yet a release, but you should be easily able to build Lebab directly from the Git repo. Would be nice if you can confirm that it works for your JSX code now.

[nickmcummins]

Hey, thanks for getting on that and the quick turnaround!

But it's still not working for me. I wasn't sure if I needed the lastest sources, so I cloned the repository, ran sudo npm --save install, then ran node bin/index.js from there on a JSX-based react component file.

➜  lebab git:(master) node bin/index.js /.. obsfuscated ../App.jsx 

/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:5701
            throw e;
            ^
Error: Line 100: Unexpected token <
    at constructError (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:2406:21)
    at createError (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:2425:17)
    at unexpectedTokenError (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:2499:13)
    at throwUnexpectedToken (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:2504:15)
    at parsePrimaryExpression (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:3306:13)
    at inheritCoverGrammar (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:2680:18)
    at parseLeftHandSideExpressionAllowCall (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:3413:20)
    at inheritCoverGrammar (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:2680:18)
    at parsePostfixExpression (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:3489:16)
    at parseUnaryExpression (/opt/lebab/node_modules/recast/node_modules/esprima/esprima.js:3549:20)
➜  lebab git:(master) node bin/index --version
1.2.0
➜  lebab git:(master) pwd
/opt/lebab

I am relatively new to using node/npm/the javascript world, so please let me know if I am not setting this up correctly.

[nene]

You should not use the --save switch. It's for saving dependencies to package.json file, but you want to read them from there instead. Also you shouldn't need to use sudo, but that's more about how you've set up your environment.

Anyway, it doesn't look like you're using the latest state of Lebab repository as it's still running Esprima, not Espree parser, giving you the exact same error you got originally.

[nickmcummins]

Thanks for the pointers. It's working for me now.

node bin/index.js ../../../../../App.jsx

I am about to run lebab with a simple script that calls for all the js source files of a React project, which would be a more thorough test. I will report back on whether it errors on anything.