From 3ae11f656f7aed2b4bd4abc8ceae3e62fdc184b8 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 30 Aug 2023 15:36:47 -0400
Subject: [PATCH] do not interpret JSX in .ts files

---
 .changeset/gorgeous-carrots-dance.md          | 33 +++++++++++++++++++
 packages/remix-dev/compiler/js/plugins/hmr.ts |  2 +-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gorgeous-carrots-dance.md

diff --git a/.changeset/gorgeous-carrots-dance.md b/.changeset/gorgeous-carrots-dance.md
new file mode 100644
index 00000000000..d843ee57b93
--- /dev/null
+++ b/.changeset/gorgeous-carrots-dance.md
@@ -0,0 +1,33 @@
+---
+"@remix-run/dev": patch
+---
+
+Do not interpret JSX in .ts files
+
+While JSX is supported in `.js` files for compatibility with existing apps and libraries,
+`.ts` files should not contain JSX. By not interpreting `.ts` files as JSX, `.ts` files
+can contain single-argument type generics without needing a comma to disambiguate from JSX:
+
+```ts
+// this works in .ts files
+
+const id = <T>(x: T) => x;
+//          ^ single-argument type generic
+```
+
+```tsx
+// this doesn't work in .tsx files
+
+const id = <T>(x: T) => x;
+//          ^ is this a JSX element? or a single-argument type generic?
+```
+
+```tsx
+// this works in .tsx files
+
+const id = <T,>(x: T) => x;
+//           ^ comma: this is a generic, not a JSX element
+
+const component = <h1>hello</h1>
+//                   ^ no comma: this is a JSX element
+```
diff --git a/packages/remix-dev/compiler/js/plugins/hmr.ts b/packages/remix-dev/compiler/js/plugins/hmr.ts
index 147a52960d3..d221eb589f5 100644
--- a/packages/remix-dev/compiler/js/plugins/hmr.ts
+++ b/packages/remix-dev/compiler/js/plugins/hmr.ts
@@ -139,7 +139,7 @@ declare global {
             sourceCode,
             output: {
               contents: resultCode,
-              loader: "tsx",
+              loader: args.path.endsWith(".ts") ? "ts" : "tsx",
               resolveDir: path.dirname(args.path),
             },
           };