Blog Articles and information on C# and .NET development topics

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

<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

<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!

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

While we appreciate comments from our users, please follow our posting guidelines. Have you tried the Cyotek Forums for support from Cyotek and the community?

Comments

teoman

# 18 February 2016 Reply

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?

Richard Moss

# 18 February 2016 Reply

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

Ashish

# 14 September 2016 Reply

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