Syntax for text/jsx inside HTML

NOTE: I originally filed this issue in VSCode's repo, but they requested that I file it here instead.

When editing an HTML file in VSCode, syntax highlighting for <script type="text/javascript"> is working just fine - even for JSX syntax:

But it is not working as soon as I change it to <script type="text/jsx">:

Also: I noticed that VSCode's "Format Document" command works on the contents of <script type="text/javascript"> but not when it is changed to <script type="text/jsx">

@sorbits @infininight - I see you're the top contributors to this repo, what's the process for getting PRs approved nowadays?

[arildgrimstveit]

have you resolved the issue?

[aflynn93]

@infininight @sorbits Can you help us out with getting the PR merged?

[dmail]

By the way does it makes sense to add <script type="module/jsx">?

[aflynn93]

I did some digging and couldn't find any references to being able to set a script type to "module/*". I only see it as <script type="module">. Do you know of any instance where you can specify something after module? I don't think I've ever actually used the module type before so I'm pretty unfamiliar with it.

[dmail]

I don't think "module/*" exists yet. I would like to introduce it to be able to use import inside the js code.

<script type="text/jsx">
  ReactDOM.render(<h1>Hello</h1>, document.getElementById('app'))
</script>

is meant to be converted to a regular script tag

<script>
  ReactDOM.render(React.createElement('h1', null, 'Hello'), document.getElementById('app')
</script>

There is a need for a module version to be able to use import(s).

<script type="module/jsx">
  import React from "https://cdn.jsdelivr.net/npm/@esm-bundle/react@17.0.2-fix.0/esm/react.production.min.js"
  import ReactDOM from "https://cdn.jsdelivr.net/npm/@esm-bundle/react-dom@17.0.2-fix.0/esm/react-dom.production.min.js"

  ReactDOM.render(<h1>Hello</h1>, document.getElementById('app'))
</script>

That would be converted back to a <script type="module"> by tools

<script type="module">
  import React from "https://cdn.jsdelivr.net/npm/@esm-bundle/react@17.0.2-fix.0/esm/react.production.min.js"
  import ReactDOM from "https://cdn.jsdelivr.net/npm/@esm-bundle/react-dom@17.0.2-fix.0/esm/react-dom.production.min.js"

  ReactDOM.render(React.createElement('h1', null, 'Hello'), document.getElementById('app'))
</script>

"text/jsx" was invented and is ignored by the browser, "module/jsx" would be ignored as well and be the module equivalent of "text/jsx".

I'm also experiencing this issue. Although text/jsx was invented, and normally should be ignored by the browser, there should still be a way to get its syntax to be highlighted. Everything is shown in plain white text here.

[dmail]

For sure, I would like to see text/jsx highlighted in VSCode too. (Ideally module/jsx as well)

[mmsaki]

any updates on this?

[Playerdog]

why not just use "text/babel"?

[ahmad-punch]

Any Updates on this?

[starball5]

Related Stack Overflow question: Can't get the correct Language Mode / IntelliSense for a script tag with type="text/jsx" in an HTML file.