Working around "Cannot use JSX unless the '--jsx' flag is provided." using the TypeScript 1.6 beta

javascript react typescript

I've been using the utterly awesome ReactJS for a few weeks now. At the same time I started using React, I also switched to using TypeScript to work with JavaScript, due to it's type safety and less verbose syntax when creating modules and classes.

While I loved both products, one problem was they didn't gel together nicely. However, this is no longer the cause with the new TypeScript 1.6 Beta!

As soon as I got it installed, I created a new tsx file, dropped in an example component, then saved the file. A standard js file was generated containing the "normal" JavaScript version of the React component. Awesome!

Then I tried to debug the project, and was greeted with this error:

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

In the Text Editor \ TypeScript \ Project
General section of Visual Studio's Options dialog, I found an option for configuring the JSX emit mode, but this didn't seem to have any effect for the tsx file in my project.

Next, I started poking around the %ProgramFiles(x86)%\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript folder. Inside Microsoft.TypeScript.targets, I found the following declaration

xml
<TypeScriptBuildConfigurations Condition="'$(TypeScriptJSXEmit)' != '' and '$(TypeScriptJSXEmit)' != 'none'">$(TypeScriptBuildConfigurations) --jsx $(TypeScriptJSXEmit)</TypeScriptBuildConfigurations>

Armed with that information I opened my csproj file in trusty Notepad++, and added the following

xml
<PropertyGroup>
  <TypeScriptJSXEmit>react</TypeScriptJSXEmit>
</PropertyGroup>

On reloading the project in Visual Studio, I found the build now completed without raising an error, and it was correctly generating the vanilla js and js.map files.

Fantastic news, now I just need to convert my jsx files to tsx files and be happy!

Update History

  • 2015-09-04 - First published
  • 2020-11-21 - Updated formatting

Like what you're reading? Perhaps you like to buy us a coffee?

Donate via Buy Me a Coffee

Donate via PayPal

Targeting multiple versions of the .NET Framework from the same project
Reading Adobe Swatch Exchange (ase) files using C#

Comments

# teoman

This one is working while building with VS 2013 locally.

But when I publish on website at Azure, it is still throwing error.

Error TS17004: Build: Cannot use JSX unless the '--jsx' flag is provided.

How can I fix this on Azure deployment?

Reply

# Richard Moss

Hello,

Thanks for your comment. My initial guess is that you applied the setting only to your Debug config, and your Azure publish will be using the Release config.

I actually need to update this article as there is a UI for it - if you display the Project Properties window, a new TypeScript Build tab will appear - I'm so unused to never seeing the contents of this window extend I never thought to check it when first playing with TypeScript! Regardless, you can use this page to configure the JSX Compilation mode - just change the Configuration option to All configurations, then change the JSX compilation in TSX files to React.

I have a web project using TSX files that I publish to an Azure website and this works fine for me, although I am using Visual Studio 2015 rather than the 2013 you mentioned.

Hope this helps.

Regards;
Richard Moss

Reply

# Ashish

You bro, nailed it man.. finally i resolved that shitty error. I got frustrated and couldnt find any solutions on google. I will shared your post in my website. Thanks

Reply

author
Richard Moss
Founder

The founder of Cyotek, Richard enjoys creating new blog content for the site. Much more though, he likes to develop programs, and can often found writing reams of code. A long term gamer, he has aspirations in one day creating an epic video game - but until that time comes, he is mostly content with adding new bugs to WebCopy and the other Cyotek products.