CODEWITHSUNDEEP
reactjstypescriptvisual-studiocreate-react-app
Andy Braham
Andy Braham

Reputation: 10163

Visual Studio (2017 & 2019) ignoring TypeScriptCompileBlocked

I have been having some problems with Visual Studio compiling Typescript files, this causes a HUGE headache since the compiled .js files will be used first instead of using the files generated by SPA Development Server when the project is run.

I created a React Application (create-react-app my-app --typescript) and things work just fine until I add a new .tsx file. For some reason VS will always compile the file if added through the Solution Explorer.

I made sure that Typescript compiling was disabled in the .csproj 

<PropertyGroup>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    {...}
</PropertyGroup>

One thing I did notice is when I add a new .tsx file VS will put a couple of entries into the project file:

<ItemGroup>
    <None Remove="<project>\src\<file>.tsx" />
</ItemGroup>

<ItemGroup>
    <TypeScriptCompile Include="<project>\src\<file>.tsx" />
</ItemGroup>

The interesting thing is when I remove these entries from the Project it will still compile until I restart VS, is there a way to force Visual Studio to not compile any Typescript files and not add them to the project file or is this just another bug in VS to workaround?

Upvotes: 7

Views: 1055

Answers (2)

Grzegorz G.
Grzegorz G.

Reputation: 1345

I used this in my csproj to resolve problem

<PropertyGroup>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptNoEmitOnError>true</TypeScriptNoEmitOnError>
    <TypeScriptNoImplicitReturns>true</TypeScriptNoImplicitReturns>
    <TypeScriptEnableIncrementalMSBuild>false</TypeScriptEnableIncrementalMSBuild>
</PropertyGroup>

Upvotes: 0

Andy Braham
Andy Braham

Reputation: 10163

There is a setting within the template file itself that is causing the script to compile, there are a couple of ways to handle this, either create a new .tsx template or update the existing one. The script template lives in

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\ItemTemplates\AspNetCore\Web\Scripts\1033\TypeScriptJsxFile

In the tsxFile.vstemplate there is an attribute on the ProjectItem under TemplateContent that tells VS to compile the file, to fix remove the `ItemType="TypeScriptCompile" from the template. Find the section:

<TemplateContent>
    <ProjectItem SubType="Code" ItemType="TypeScriptCompile" TargetFileName="$fileinputname$.tsx" ReplaceParameters="true">file.tsx</ProjectItem>
</TemplateContent>

And simply remove the entire attribute and save, you will have to edit the file using Administrator permissions if you are updating the template:

<TemplateContent>
    <ProjectItem SubType="Code" TargetFileName="$fileinputname$.tsx" ReplaceParameters="true">file.tsx</ProjectItem>
</TemplateContent>

I did run into some issues when creating a new template, if you have troubles please see this question.

Upvotes: 5

Related Questions