React JSX error : Unclosed regular expression

Question

Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the pic:

This error was also showing error like: 1. Unclosed regular expression

How to solve this?

score 48 · Answer 1 · answered Aug 05 '19 at 03:09

48

If you are using jshint plugin, remove it and install ESLint plugin.

It is a good replacement for jshint in reactJS work.

answered Aug 05 '19 at 03:09

Yuvraj Patil

7,944
5
56
56

1

After that you should restart the computer for cleaning RAM. – vili May 26 '21 at 14:13
2

Restarting VS Code should be enough. – Yuvraj Patil May 26 '21 at 14:36
this solves my problem, i have the jslint install globally, and esLint extension installed in vscode – abdulkareem alabi Oct 09 '22 at 22:23

score 10 · Answer 2 · edited Jul 03 '17 at 20:14

10

I tried several options like creating a .eslintrc file or .jshintrc file.

But it turned out that in my Visual Studio Code IDE, there was third party extensions(eslint/jslint/tslint/beautify/jsformatter etc) that were causing a big mess in my JSX code.

I had to go to the extensions and disable all the extension which could hinder in the natural process of linting and code cleaning of React framework.

(These extensions are really great. But disabling them helped me in solving this issue of mine, no offense to anyone.)

If you are facing the same issue and the issue persists event after adding a .jshintrc with content:

{
    "esversion": 6
}

then consider disabling the third party extensions.

Hope my answer helped.

edited Jul 03 '17 at 20:14

Matt Bierner

58,117
21
175
206

answered Jul 01 '17 at 13:38

Abhay Shiro

3,431
2
16
26

I am pretty sure it was only the formatter. Automatic formatters have many problems. And using multiple formatters at once is just not possible. Using multiple linters at once is probably unnecessary. – Sulthan Jul 03 '17 at 20:19
True it is unnecessary. I just had those linters lying out there for no reason, which was causing the issue. – Abhay Shiro Jul 04 '17 at 03:25
1

ya this help me out – manoj Aug 08 '17 at 16:50
1

This answer led me to disabling JSHint which solved my issue. – Janac Meena Feb 27 '19 at 20:31

score 10 · Answer 3 · edited Jun 20 '20 at 09:12

10

the extension that did it for me was...

jshint

dbaeumer.jshint
Dirk Baeumer

as @abhay-shiro says, disabling a few extensions will usually resolve the issue.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 29 '18 at 13:03

Showcase Imagery

372
2
19

VikasKM · Answer 4 · 2019-01-09T09:33:46.257

2

I had the same problem, but it was "beautify" extension which was causing the error, I uninstalled it and installed prettier. It fixed the problem.

edited Jan 09 '19 at 09:33

answered Jan 09 '19 at 06:46

VikasKM

212
3
7

score -8 · Answer 5 · answered Mar 22 '18 at 06:56

-8

I solved this issue by disabling show syntax errors checkbox in visual studio 2015.

Tools -> options - > text editor -> javascript -> intelliSense -> general -> show syntax errors(disable)

answered Mar 22 '18 at 06:56

Dayan

369
1
5
12

39

This is exactly how the Chernobyl disaster happened. You don't overlook warnings, you get rid of or fix the things that caused them. – Laszlo T Jul 03 '18 at 19:00

React JSX error : Unclosed regular expression

5 Answers5

jshint

Linked