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

Question

I am using VS 2013 and tsx files with react. I can build my project manually just fine. (Right click and build solution)

But when I try to publish on Azure, VS tries to build again but at that time I am getting all bunch of errors stated as:

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

and points to my tsx files.

Seems like Azure Publish using different kind of build steps than VS 2013 does.

How can I fix this issue?

Fanny

Does this answer your question? Cannot use JSX unless the '--jsx' flag is provided – Valetudinarian

Answer 1

I added "jsx": "react" to my tsconfig.json to resolve this error:

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "outFile": "Content/app.js",
        "sourceMap": true,
        "jsx": "react"
    }
}

Humbert

I tried this already, it works ok with VS build. But when I try to publish on Azure, VS tries to build again but at that time I am getting errors. – Fanny

Answer 2

In your tsconfig.json add a property jsx with react value "jsx": "react". Second, you should also include the file to reflect the compiler options like this (index.tsx).

{
    "compilerOptions": {
        "outDir": "./build/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "files": [
        "./src/app/index.tsx"
    ]
}

Loki

any option to refer multiple files like * ? – Framing

Answer 3

Adding this to the csproj worked for me in VS2015:

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

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

Sloven

I already have this in my .csproj. Did you ever try to publish on Azure? – Fanny

I haven't unfortunately. Sorry it didn't work for you. – Sloven

Answer 4

Today, as of using es2019 + typescript 4.1.3 I believe the npm start command resulted in a message that says it changed tsconfig.json (for me)

Into: "jsx": "react-jsx",

Visual Studio 2019 though, does not approve of that setting and this results in a huge error list.

Trifacial

Either select "Use Workspace Version" as per this answer https://mcmap.net/q/236938/-problem-with-visual-studio-code-using-quot-react-jsx-quot-as-jsx-value-with-create-react-app or add the .env file with the variable DISABLE_NEW_JSX_TRANSFORM=true as per this answer https://mcmap.net/q/236938/-problem-with-visual-studio-code-using-quot-react-jsx-quot-as-jsx-value-with-create-react-app – Displume

Answer 5

The solution provided here worked for me in Visual Studio 2017

https://www.koskila.net/fixed-cannot-use-jsx-unless-the-jsx-flag-is-provided/

Basically changing TS Build properties.

Right click on project->Properties->TypeScript Build

In option JSX compilation in TSX files choose React.

Strontianite

Answer 6

If you happen to still be struggling with this, check your project settings, ensuring JSX compilation in TSX files is set to React, and double-check that you're looking at the correct build configuration (it's very easy to miss that, and I have no idea why TS build is build-configuration-specific). Tested on VS2015.

EDIT: I should have mentioned that I was able to publish from VS2015 to Azure; I originally came across this same error and realized that my non-release build configurations had been updated but not the release config. I made the change described above, and publish then succeeded.

Adjuvant

As I said many many times before. It is not about VS build. It is about Azure Deployment. VS 2015 builds it fine, when I try to publish website to Azure error occurs. – Fanny

Deploying to Azure works correctly with this feature; I literally did it last night. When I ran into this problem, I came upon this question that didn't have an answer, but it dawned on me that I was publishing a release build, and I hadn't built with that configuration yet. I had the project settings configured correctly for debug and beta, but not release. So I decided to mention this as a possibility. If that doesn't help you, then so be it, but there's no need to be a dick about it. – Adjuvant

You did not specifically mention about Azure publishing. Hence, your answer does not add anything new to previous answers. If it works for your Azure publishing process, it is good to mention on that. Since previous users were only considering "VS build" instead of Azure Publish tool. If you see all my previous comments, I was telling people about that, and there is nothing to offend on here. – Fanny

Answer 7

tsc --jsx helloWorld.tsx http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

It might be helpful to you

Antipas

This is OK when I build manually, but does not work once I try to publish to Azure. Because Azure uses build.exe from another path, not using same method of VS 2015. – Fanny