Template string variables in JSX raises "Unexpected token ILLEGAL"

[BenoitZugmeyer]

This is a regression from espree 0.12.0.

var espree = require('espree');

espree.parse('<foo bar={`${baz}`} />', {
    ecmaFeatures: {
        templateStrings: true,
        jsx: true
    }
});
// Raises: Unexpected token ILLEGAL

The same code without ${baz} is OK

[nzakas]

Must have to do with the template string changes.

Just so we're clear, you're saying this is a regression from v1.11.0 that you found in v1.12.0?

[BenoitZugmeyer]

Oh, yes it is (I mixed up version numbers)

[lencioni]

Sometimes I also see messages like:

182  -1  error  Unexpected quasi
     myProp={

In cases where I am using ES6 template strings in props as well. Not sure if that is the same problem or not. Let me know if you'd like me to open another issue.

[mikesherov]

@nzakas let me know what you find. My guess is missing curlyStack pop push inside JSX expressions.

[nzakas]

Related: jquery/esprima#1145

[mikesherov]

@lencioni

182  -1  error  Unexpected quasi
     myProp={

Can you provide an actual code snippet that exhibits this bug?

[kentor]

Hey I'm having this problem as well, and it's breaking my CI build :)

This will reproduce the Unexpected quasi error:

<a>{`${1}`}{``}</a>

  1:11  error  Unexpected quasi {

[mikesherov]

@nzakas you should be able to take my patch and see if it fixes @kentor 's issue.

[nzakas]

Yup. Since we have lookahead2(), I'm anticipating that will do it. Just don't have the time to dig in yet.

[lencioni]

@mikesherov here's a simplified repro case for the Unexpected quasi:

const React = require('react/addons');

const MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <div myProp={`${this.props.something}`}/>
        <div differentProp={`${this.props.anotherThing}`}/>
      </div>
    );
  }
});

module.exports = MyComponent;

[mikesherov]

jquery/esprima#1145 has landed with some additional perf improvements.

[nzakas]

Working on this.

[nzakas]

@mikesherov Yup, these fixes fixed all the issues mentioned in this issue.

[eprouty]

I just ran npm install eslint@latest and have a .eslintrc that has this in it.

ecmaFeatures": {
    "templateStrings": true,
    "jsx": true
}

But when linting a .jsx file that has the follow line in it <form action='/round', method='POST',role='form'> I get this output...

  8:34  error  Unexpected token ,

✖ 1 problem (1 error, 0 warnings)

Am I missing something needed to get your fixes working @nzakas?

[xjamundx]

I'm not super sharp, but isn't that invalid code?

<form action='/round', method='POST',role='form'>

I got a similar error when putting this through the babel (jsx-compatible) repl:
https://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&playground=false&code=%3Cform%20action%3D'%2Fround'%2C%20method%3D'POST'%2Crole%3D'form'%3E

And from the command-line jsx compiler:

~/dev/eslint (empty-strings) $ jsx test.jsx
Error while reading module test.jsx:
Error: Parse Error: Line 1: Unexpected token ,
    at throwError (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2644:21)
    at throwUnexpected (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2706:9)
    at parseXJSIdentifier (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6807:13)
    at parseXJSAttributeName (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6852:16)
    at parseXJSAttribute (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6939:16)
    at parseXJSOpeningElement (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6996:29)
    at parseXJSElement (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7021:26)
    at parsePrimaryExpression (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3352:20)
    at parseLeftHandSideExpressionAllowCall (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3436:61)
    at parsePostfixExpression (/usr/local/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3476:20)

[eprouty]

Hah, you are correct, that actually was an unexpected token... there shouldn't a , there. Silly mistake on my part.

Also means this linter is working correctly and I was being obstinate! Thanks, and nice work.

[rastalamm]

Is this fixed?

I am getting a Parsing Error: unexpected token ILLEGAL on the $

`${apiHost}/users/${user.id}/cart`

[nzakas]

The issue is still open, so it's not fixed yet.

[ilyavolodin]

@nzakas This issue is actually closed. It looks like the fix didn't catch all of the cases, or @rastalamm is using an older version without the fix.

[mikesherov]

@rastalamm, what version are you using? And what is the complete JS you're trying to parse?

[rastalamm]

@ilyavolodin - I thought the issue was closed!

I ran npm install -g eslint & npm install -g eslint@latest and using version 2.14.7

[rastalamm]

@mikesherov

function getUserCart(req, ignore, next) {
        var user = req.user;
        request.get(`${apiHost}/carts?user_id=${user.id}`, {json: true}, function (err, httpResponse, cart) {
            if (httpResponse.statusCode === 200) {
                req.cart = cart.CartItems;
            }
            next();
        });
    }

[rastalamm]

So you guys can actually ignore this!! I am posting on the wrong thread! (Its been a long week)

I was having the issue with the npm package eslint and just noticed this is for espree..

Sorry about that!

[mikesherov]

You'll wind up back here though. Eslint uses espree

[mikesherov]

I'll see if this is a bug in latest Esprima. @nzakas I suggest you check this in acorn if you're switching soon anyway.