JSX: <svg : path /> parsed incorrectly

[strager]

Bug Report

🔎 Search Terms

jsx tag namespace

🕗 Version & Regression Information

v4.5.4, v4.6.0-dev.20211221

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX

⏯ Playground Link

Playground link with relevant code

💻 Code

import React from "react";
function MyComponent() {
  return <svg : path />;
}

🙁 Actual behavior

TypeScript reports errors:

Type 'true' is not assignable to type 'string | undefined'.
Identifier expected.

TypeScript compiler generates undesired JavaScript:

import React from "react";
function MyComponent() {
    return React.createElement("svg", { path: true });
}

It looks like TypeScript is interpreting svg : path similar to svg path. According to the JSX specification, whitespace is allowed around the : token.

🙂 Expected behavior

TypeScript treats the code as if it was the following:

import React from "react";
function MyComponent() {
  return <svg:path />;  // Note: no spaces around ':'.
}

generating the following JavaScript:

import React from "react";
function MyComponent() {
    return React.createElement("svg:path", null);
}

Babel, ESLint, and Flow interpret the code this way. ESBuild seems to have the same interpretation as TypeScript.

[RyanCavanaugh]

We should parse this better, but namespaced elements are not yet supported. See also #7411