In chrome devtools, in all my tsx source files, syntax highlighting and intellisense no longer work

Question

Debugging functionalities are not working anymore for me in files with a .tsx extention.

It is working as normal when debugging a .ts file:

Source maps are unchanged from when it was still working. However .tsx files now look like this.. All the code is black rather than styled to indicate differences between keywords / strings etc .. And when debugging (which does work) I cannot hover variables to see their value.

Any idea how to solve this?

Edit: I once solved this by sending content type headers as explained in answer below. But the problem is back now even though when I open the source file in a new tab I can see Content-Type is "application/javaScript"

Inopportune

did you use webpack/babel? if so, please attach the config file. – Fugate

If it used to work and now doesn't (despite showing the correct content type), I'd recommend filing an issue on Chromium. – Nomarchy

Answer 1

Finally managed to solve this.

As described in this question, if you manually let your webserver return the right mime-type for tsx files, chrome will show them with colors and allows proper debugging again.

for me, For an Apache server I included this in httpd.conf

AddType application/javascript .tsx

Inopportune

I'm currently having the same issue (same symptoms) and the solution that worked for you doesn't for me. – Tile

@Tile quite a bit later, but check updated answer in case this happens again for you – Inopportune