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?

Does this answer your question? [Cannot use JSX unless the '--jsx' flag is provided](https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided) — Michael Freidgeim, Feb 24 '23 at 07:46

score 35 · Answer 1 · answered Apr 22 '16 at 13:45

35

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"
    }
}

answered Apr 22 '16 at 13:45

Andy Edinborough

4,367
1
29
28

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. – Teoman shipahi Apr 22 '16 at 14:23

score 7 · Answer 2 · answered Nov 10 '16 at 00:49

7

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"
    ]
}

answered Nov 10 '16 at 00:49

Juni Brosas

1,425
2
14
24

any option to refer multiple files like * ? – Kurkula Apr 02 '19 at 23:59

score 6 · Answer 3 · edited Nov 03 '20 at 17:14

6

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

edited Nov 03 '20 at 17:14

KyleMit

30,350
66
462
664

answered Feb 25 '16 at 16:47

theycallmemorty

12,515
14
51
71

I already have this in my .csproj. Did you ever try to publish on Azure? – Teoman shipahi Feb 25 '16 at 16:51
I haven't unfortunately. Sorry it didn't work for you. – theycallmemorty Feb 25 '16 at 19:15

Joe · Answer 4 · 2016-06-16T19:03:55.533

1

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.

edited Jun 16 '16 at 19:03

answered Jun 16 '16 at 01:29

Joe

1,295
13
16

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. – Teoman shipahi Jun 16 '16 at 01:41
1

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. – Joe Jun 16 '16 at 18:46
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. – Teoman shipahi Jun 16 '16 at 18:56

score 1 · Answer 5 · answered Jul 01 '19 at 20:17

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.

score 1 · Answer 6 · answered Jan 26 '21 at 20:55

1

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.

answered Jan 26 '21 at 20:55

Egbert Nierop

2,066
1
14
16

Either select "Use Workspace Version" as per this answer https://stackoverflow.com/a/64976666/3559967 or add the .env file with the variable `DISABLE_NEW_JSX_TRANSFORM=true` as per this answer https://stackoverflow.com/a/67467204/3559967 – HelloWorld101 Aug 24 '21 at 13:31

score 0 · Answer 7 · answered Feb 22 '16 at 05:55

0

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

It might be helpful to you

answered Feb 22 '16 at 05:55

danny

1

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. – Teoman shipahi Feb 22 '16 at 05:56

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

7 Answers7

Linked