React JSX E015 "Unclosed regular expression"

[rhernandog]

Hi,

I'm having some issues in specific parts of a React App with the error E015.

Here are some lines where the error is showing:

<ImagePreview key={el.id} {...el} />

The errror shows in the bigger-than sign at the end

<div className="panel-footer">
  <h5>{this.state.image.description}</h5>
</div>

The errror shows in the bigger-than sign at the end of the h5 tag

<Link to={"topics/"+e.id} key={e.id} className="list-group-item">
  <h4>{e.name}</h4>
  <p>{e.description}</p>
</Link>

The errror shows in the bigger-than sign at the end of the h4 tag

I have version 2.9.4 and using VS Code version 1.9. The resulting bundled code is working without any problem.

What draws my attention is that the error goes away when the code changes to this:

<div className="panel-footer"><h5>
  {this.state.image.description}
</h5></div>

Hopefully someone could give me some pointers regarding this.

Best,
Rodrigo.

[jugglinmike]

JSHint is not capable of parsing JSX syntax, so I don't think the source code you have shared is the same as the code being supplied to JSHint. It's difficult to say this without further knowledge of your toolchain, though. If you could share the JavaScript code, then we should be able to help.

[rhernandog]

Hi and thanks for the quick answer!!

Here's a very simple react biolerplate that's presenting the same issue:

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>React simple boilerplate</div>
    );
  }
}

Here's a picture of how it looks on VS Code. This is the complete file as you can see and the error is the same.

Hopefully this info is helpful.

Best,
Rodrigo.

[jugglinmike]

I can reproduce that behavior on JSHint.com, but the error you have reported is
expected. JShint is not capable of parsing JSX syntax, so the error is
correctly identifying invalid JavaScript.

I'm not quite ready to close this issue, though, because your initial report
stated that the following input did not produce an error:

<div className="panel-footer"><h5>
  {this.state.image.description}
</h5></div>

While this may be valid JSX syntax, it is not valid JavaScript, and I would
expect JSHint to report an error. The fact that it does not suggests that your
editor is performing some sort of transformation to the code before passing it
along to JSHint. It's hard to say because I don't know how your editor is
configured to invoke JSHint. Can you research how that integration happens
(likely via some plugin), and see if such a transformation is taking place? If
so, then the error we're seeing may still reflect a bug in JSHint itself
(though it could also be an issue with the plugin).

[rhernandog]

I'll look into that and get back as soon as I have some info.

Best,
Rodrigo.

[jugglinmike]

Any word on this, @rhernandog?

[rhernandog]

@jugglinmike Sorry but there's no news regarding this.

As you can see I mentioned in the extension's repo with no luck. In fact the extension hasn't been updated in almost a year and no issue has been answered since September, so I'm not very confident that we'll get an answer regarding this. The creator is most focused on the ESLint extension than the JSHint one, like Neo said to the architect: The problem is choice

It's your choice to either keep this open or close it. If by any miracle there's an answer on the repo I'll get back and re-open it.

Thanks for following up.

Best,
Rodrigo.

[jugglinmike]

Without any further information, there's not much we can do here. I think my theory regarding erroneous plugin behavior is the most viable explanation, so I'd like to proceed based on that interpretation until we have reason to suspect otherwise. As you say, we can re-open this issue when/if that's appropriate.

Thanks for getting back to me!

[AbhayShiro]

https://stackoverflow.com/questions/44861564/react-jsx-error-unclosed-regular-expression/44861565#44861565

I hope this answer helps.

I was facing the same issue. Turns out it was caused by several third party extensions.

[RMacfarlane]

hey @jugglinmike, I've worked on the VS Code extension using JSHint recently and can shed some light on it. It's directly passing the whole document as one string to the JSHINT javascript api, no transformation is done. The code

<div className="panel-footer"><h5>
  {this.state.image.description}
</h5></div>

does show errors. I'm not sure what the original author's intention was with running it on .jsx files, but I guess the solution would be for the extension to parse the file and identify the jsx parts of syntax and make them blank lines before passing them to JSHint.

[sshreya0808]

I am facing the same issue... Not sure how to handle this

[tewshi]

Same issue here, or maybe its not even an issue...

[janacm]

Disabling JSHint solved this issue for me.

[JuanPabloSilva]

How to disable jshint?

[kalpesh9896]

@JuanPabloSilva please check it.

aurelia/vscode-extension#80 (comment)

[hiraditya]

This error is so annoying that it makes jshint unusable. Is there an option to disable this hint at least?

[franciscobenedict]

This error is so annoying that it makes jshint unusable. Is there an option to disable this hint at least?
Totally agree with you @hiraditya
We should have the option to disable this particular jshint but not the entire extension.

[s3687636]

just disable the jshint, since it conflicts with other vscode packages.

[bcygsws]

Thank you,I removed the jshint.Then everything is OK.

[simonmatt]

I uninstall jshint from my VS Code extensions, then this issue gone.

[o-az]

I nuked jshint and my life is now sorted.