#SharePointProblems | Koskila.net

Solutions are worthless unless shared! Antti K. Koskela's Personal Professional Blog

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

koskila
Reading Time 2 min
Word Count 264 words
Comments 8 comments
Rating 4 (1 votes)
View

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

Table of Contents

Whilst 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 run in the browser.

Solution

The issue was luckily fixed rather quickly, 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.

Comments

Interactive comments not implemented yet. Showing legacy comments migrated from WordPress.
Luis Alberto Nores
2017-12-05 17:14:50)
Thank you very much for provide the solution it was driven me crazy
2017-12-05 17:26:13
Happy to be of help! :)
Erkan Er
2019-04-01 06:21:04)
fantastic!
2019-04-06 00:56:47
Thanks! :)
Utkarsh
2019-04-30 05:39:56)
Thank you for the solution.It is probably the best solution I have gone through!!
2019-04-30 09:56:00
Hi Utkarsh, Thanks for the kind words, happy it helped! :)
Aymen
2019-10-02 00:54:18)
Thank you so much!!!! searched a lot and no one mentioned this
2019-10-02 03:23:18
My pleasure, Aymen! Happy it helped. :)