Typescript & React.JS

Fixed: Cannot use JSX unless the ‘–jsx’ flag is provided

This blog post is about fixing issues related to building a project with TypeScript files. Basically, if your jsx or tsx -files are not getting built to js-files (which is what the browser understands) in Visual Studio’s build, this post might solve the issue for you.

Description

While converting a project using React.js to TypeScript (and, hence, to use .ts and .tsx files instead of .js and .jsx) I stumbled upon this error:

Cannot use JSX unless the '--jsx' flag is provided

The project would not build a .tsx-file with ReactDOM.render(…) in it. This is a huge issue, of course, as my JavaScript-files would not update during the deployment. This means, that all of the code in TypeScript and React is not ran in the browser.

Solution

The issue was luckily rather quickly fixed, at least for me. Visual Studio had defaulted the “JSX compilation in TSX files” to None. I may have unloaded the project file in Visual Studio or something like that – or that might even be the default value. Either way, it needs to be changed the get the build to finish. Just choose “React” in projects properties for TypeScript build, see the screenshot below:

JSX compilation on TypeScript build
JSX compilation on TypeScript build

Ought to work now, at least it did for me. The same settings should apply for Visual Studio 2012, 2013 and 2015.

Depending on your CI-build settings (or whether you’re using any or not), you may need to make sure the solution file is committed to version control before stuff works there, or even tweak the build settings there, too. 

The following two tabs change content below.

Antti K. Koskela

Solutions Architect / Escalations Engineer at Koskila / Norppandalotti Software / Valo Solutions
Antti Koskela is a proud digital native nomadic millenial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as a Solutions Architect for Valo Intranet, the product that will make you fall in love with your intranet. Working with the global partner network, he's responsible for the success of Valo deployments happening all around the world. He's been a developer from 2004 (starting with PHP and Java), and he's been bending and twisting SharePoint into different shapes since MOSS. Nowadays he's not only working on SharePoint, but also on .NET projects, Azure, Office 365 and a lot of other stuff. This is his personal professional (e.g. professional, but definitely personal) blog.

2 thoughts on “Fixed: Cannot use JSX unless the ‘–jsx’ flag is provided

Let me know your thoughts!