JSX element 'h1' has no corresponding closing tag

user_2728271 0
Viewed 10916

I am using Visual Studio Code to learn ReactJs, but I don't know why for HTML code I am getting "JSX element has no corresponding closing tag" error. Please see the picture.

enter image description here

Code Before I save the file in Visual Studio Code IDE

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
    render() {
        return ( 
            <h1>Hello React</h1>
        )
    }
}

ReactDOM.render( < HelloWorld / > , document.getElementById('root'));

Code after I save the file in Visual Studio Code IDE

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
    render() {
        return ( <
            h1 > Hello React < /h1>
        )
    }
}

ReactDOM.render( < HelloWorld / > , document.getElementById('root'));
visual-studio-code reactjs
7 Answers

I had a similar issue. Each time I saved my code was reformatted resulting in a similar the error to that posed in the question. I resolved it by selectively disabling code formatting extensions I'd installed in VS Code. I found disabling the "Beautify" extension (by HookyQR) resolved the problem.

Note:I found you can disable an extension for either all VS Code instances or just a Workspace, allowing you keep it active on a Workspace by Workspace basis.

user_70419870

In my case I change the file extension for js to ts and change it back to js and that fix the issue. I think vs code is confused between typeScript and JavaScript.

user_94628160

Make sure to install Prettier as the last extension.

If you already have Prettier installed:

  • Uninstall Prettier

  • Restart VS Code

  • Install Prettier

  • Restart VS Code

This solved the problem for me and now Format on Save works!

user_6419760

If you have this error, try changing the Language Mode from "JavaScript" to "JavaScrip React" or "react". You can check that at the bottom right corner of VSC (see the picture below).

To change it, click on it and type "react" and select the React language mode.

Change it from this:

enter image description here

To this:

enter image description here

user_116591720

Happened to me. Disabled a lot of themes and other add-ons (many). No use. Re-installed Prettier: worked fine.

user_3377640

I had this same issue.When i save the file it was reformatted with the formatter that i used (prettier). I uninstalled it and re-open the visual studio code.It worked for me!

user_130012280

if there are any typescript extensions installed, remove them.

user_142666570
Related