Typescript: TSX files show up blank in Chrome

Question

When attempting to debug a TypeScript application in Google Chrome, the *.ts files are source mapped properly in the inspectors, but the *.tsx files appear totally empty, which doesn't really help me debug them.

How can I get *.tsx files to source map correctly?

Answer 1

I would suggest you to try add MIME type for *.tsx files for used web server.

In case your project is hosted on IIS try to add this to your web.config:

<system.webServer>
  ...
  <staticContent>
    <remove fileExtension=".tsx" />
    <mimeMap fileExtension=".tsx" mimeType="application/javascript" />
  </staticContent>
</system.webServer>

Answer 2

I was unable to make the web.config based solution work in my .NET Core app. So, I used IApplicationBuilder.UseStaticFiles. Since the purpose is just to use TypeScript source maps for development, I made it only serve the files when the app is in development mode.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseStaticFiles();

    if (env.IsDevelopment())
    {
        var options = new StaticFileOptions
        {
            // Replace "Scripts" with the path to your TypeScript folder
            // (this is also a workaround for the fact that we don't keep TypeScript files under wwwroot)
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "Scripts")),
            RequestPath = new Microsoft.AspNetCore.Http.PathString("/Scripts"),
            ServeUnknownFileTypes = true
        };
        app.UseStaticFiles(options);
    }
}