How do I fix linting error on jsx closing tags : "unclosed regular expression"?

user_5411817 0
Viewed 1434

(PS none of these SO questions (with inaccurate titles) solved, or addressed, this issue: React Linting: Unclosed Regular Expression, unclosed regular expression, React JSX error : Unclosed regular expression)

How do I fix linting error on jsx closing tags : "unclosed regular expression" ?

For example, this code snippet runs fine, but causes a SublimeLinter Error:

class Users extends React.Component {
  render() {

    var friends = this.props.list.filter(function(user){
        return user.friend === true;
    });
    var nonFriends = this.props.list.filter(function(user){
        return !user.friend;
    });

    return (
      <div>
        <h1>Friends</h1>
        <ul>
          ...
        </ul>
      </div>
    )
  }
}

The linter balks at the </h1> closing JSX tag, thinking it's the start of a regular expression.
1-2 of 2 errors: Unclosed regular expression; Unrecoverable syntax error. (42% scanned), 2 lines, 25 characters selected

Relevant packages I have installed in Sublime Text3:
SublimeLinter, SublimeLinter-contrib-eslint, JSHint, Babel

edit:
I just added the package "JSX", but that didn't help.
I've searched for the "sublimeLinter-jsxhint" package, but cannot find it.

sublimelinter sublimetext3 jsx eslint reactjs
2 Answers

The extension runs jshint on the complete jsx file, and jshint doesn't support jsx syntax and its features. I simply turned off the JShint using -> (Code-> Preferences-> Settings-> User extensions-> JSHint configuration-> JSHint:Enable tick box-> Off)

One solution would be manually turning off jshint around the functions returning HTML using /* jshint ignore: start */ and /* jshint ignore: end */.

user_180186680

If you use SublimeLinter-contrib-eslint AND JSHint, you are probably having problems with them conflicting. I'd remove JSHint from Sublime, unless you use it in your build pipeline, then remove the eslint package instead.

user_25824270
Related