Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

No syntax highlighting for tsx files #3333

Closed
tamj0rd2 opened this issue Aug 8, 2019 · 4 comments
Closed

No syntax highlighting for tsx files #3333

tamj0rd2 opened this issue Aug 8, 2019 · 4 comments
Labels
✖️ Non-Parcel bug Bugs related to dependencies or plugins

Comments

@tamj0rd2
Copy link

tamj0rd2 commented Aug 8, 2019 •
edited
Loading

Choose one: 🐛 bug report

When running a very basic Typescript application then go to localhost:1234 in chrome, there is no syntax highlighting for .tsx files.

🎛 Configuration (.babelrc, package.json, cli command)

Command: parcel ./src/index.html

tsconfig.json:

{
    "compilerOptions": {
      "module": "commonjs",
      "moduleResolution": "node",
      "target": "es6",
      "jsx": "react",
      "baseUrl": "./src",
      "paths": {
        "~*": ["./*"]
      },
      "allowJs": false,
      "outDir": "./dist",
      "strict": true,
      "typeRoots": ["node_modules/@types"],
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules",
      "**/node_modules/*",
      "dist/**/*"
    ]
  }

🤔 Expected Behavior

I expect that when I go to http://localhost:1234, go into the Sources tab and choose my tsx files, I should be able to see syntax highlighting for them.

😯 Current Behavior

This is what I actually see

image

💁 Possible Solution

Server.js could be updated to use the correct mime type for tsx files. Info: https://stackoverflow.com/questions/53397337/in-chrome-devtools-in-all-my-tsx-source-files-syntax-highlighting-and-intellis

🔦 Context

I need to be able to debug using the chrome debugger, and not having syntax highlighting makes it difficult to do that.

💻 Code Sample

src/index.html

<html lang="en">
<body>
    <div id="app"></div>
    <script src="./index.tsx"></script>
</body>
</html>

src/index.tsx

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("app"))

🌍 Your Environment

Software Version(s)
Parcel ^1.12.3
Node v10.16.0
npm/Yarn 6.9.0
Operating System Windows 10
@mischnic
Copy link
Member

mischnic commented Aug 8, 2019

There isn't really anything we can do here, Parcel emits source maps with the filename and the file contents as a string, the syntax highlighting is done by Chrome.

This SO answer says that the mimetype with which the tsx file is served makes a difference: https://stackoverflow.com/questions/53397337/in-chrome-devtools-in-all-my-tsx-source-files-syntax-highlighting-and-intellis
I'm not sure if the Parcel dev server uses the correct mimetype for tsx files

@tamj0rd2
Copy link
Author

tamj0rd2 commented Aug 9, 2019

If the mimetype is the problem, maybe that can be configured here? https://github.com/parcel-bundler/parcel/blob/master/packages/core/parcel-bundler/src/Server.js

I can have a little look later on.

@mischnic mischnic added the ✖️ Non-Parcel bug Bugs related to dependencies or plugins label Aug 10, 2019
@mischnic
Copy link
Member

If the mimetype is the problem

Not sure what I was thinking when writing that post, but there is no tsx mimetype involved in this case. The Parcel dev-server serves the transpiled js (not tsx) bundle and the corresponding source map file, which is a JSON file with basically these contents:

{
	"sources": [
		"index.tsx",
	],
	// ...
	"sourcesContent": [
		"console.trace(\"hello from index.tsx!\");",
	]
}

You should file a bug with Chrome. (Firefox correctly highlights the tsx file in devtools)

@tamj0rd2
Copy link
Author

tamj0rd2 commented Aug 11, 2019 •
edited
Loading

For anyone else having this problem, this is an issue with Brave and works correctly in Chrome: brave/brave-browser#5618

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
✖️ Non-Parcel bug Bugs related to dependencies or plugins
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mischnic @tamj0rd2