v2pre ts bug, not happy with typed const arrow functions

[xHomu]

What version of Remix are you using?

2.0.0-pre.2

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Upgrading to v2 release candidate from v1.19.3 is fairly painless on mana.wiki, except for this one weird Typescript error that I don't know what might be the sourced from:

$ remix dev -c "npm run dev:node" --manual

 💿  remix dev

 info  building...
X [ERROR] The character ">" is not valid inside a JSX element

    app/utils/swr-fetchers.ts:25:48:
      25 │ export const swrGqlFetcher = <T>(props: Props) => {
         ╵                                                 ^

  TypeScript's TSX syntax interprets arrow functions with a single generic type parameter as an opening JSX element. If you want it to be interpreted as an arrow function instead, you need to add a trailing comma after the type parameter to 
disambiguate:

    app/utils/swr-fetchers.ts:25:29:
      25 │ export const swrGqlFetcher = <T>(props: Props) => {
         │                              ~~~
         ╵                              <T,>


X [ERROR] Unexpected "const"

    app/utils/swr-fetchers.ts:26:3:
      26 │    const { query, variables } = props;
         ╵    ~~~~~


 info  rebuilding... (~ app\utils\swr-fetchers.ts)
 info  building...
X [ERROR] The character ">" is not valid inside a JSX element

    app/utils/swr-fetchers.ts:26:48:
      26 │ export const swrGqlFetcher = <T>(props: Props) => {
         ╵                                                 ^

  TypeScript's TSX syntax interprets arrow functions with a single generic type parameter as an opening JSX element. If you want it to be interpreted as an arrow function instead, you need to add a trailing comma after the type parameter to 
disambiguate:

    app/utils/swr-fetchers.ts:26:29:
      26 │ export const swrGqlFetcher = <T>(props: Props) => {
         │                              ~~~
         ╵                              <T,>


X [ERROR] Unexpected "const"

    app/utils/swr-fetchers.ts:27:3:
      27 │    const { query, variables } = props;
         ╵    ~~~~~


 info  rebuilding... (~ app\utils\swr-fetchers.ts)

Updating the .ts files so they don't use arrow functions got the build working, otherwise, great release!

• Mana PR: https://github.com/manawiki/core/pull/207/files

Expected Behavior

Remix shouldn't have an opinion about how I declare functions in typescript files.

Actual Behavior

Remix is very insistent on me stop using const arrow functions.

[AlemTuzlak]

@xHomu I have the same issue, created a minimum repro here:
https://github.com/AlemTuzlak/remix-v2-ts-issue
You can reproduce this issue by cloning my repo, installing the deps and running npm run dev.
The issue seems to be with the remix.config.js,
If you add the following to ignoredRouteFiles:

const ignoredRoutePatterns = [
  "**/.*",
  "**/components/**",
  "**/integration/*.test.*",
];

module.exports = { 
  ignoredRouteFiles: ignoredRoutePatterns,
  serverDependenciesToBundle: [/^marked.*/],
  tailwind: true,
  serverModuleFormat: "cjs",
};

it breaks, but if you do the following:

const ignoredRoutePatterns = [
-  "**/.*",
+ "**/*",
  "**/components/**",
  "**/integration/*.test.*",
];

module.exports = { 
  ignoredRouteFiles: ignoredRoutePatterns,
  serverDependenciesToBundle: [/^marked.*/],
  tailwind: true,
  serverModuleFormat: "cjs",
};

it works

[pcattori]

@AlemTuzlak Setting **/* in ignoredRoutePatterns will make Remix ignore all of your route files, which only prevents the error by not processing any routes.

@xHomu Needing to disambiguate single-arg generics from JSX elements has been a thing in TS for a long time. Here's a playground repro: https://tsplay.dev/w6Vqyw . Note that changing the TS version to anything (3.3-5.2) results in the same error.

To fix your code, you don't have to remove arrow functions. You can put a comma after the T (or whatever type generic) as indicated in the error message: https://tsplay.dev/WPBJkN

Not sure why you'd only run into this in v2 and not 1.19.3, but maybe we fixed something in the compiler to be more TS compliant. But I'd argue that's a feature, not a bug.

[AlemTuzlak]

@pcattori so what you're saying is we're idiots 🤣 (for anyone reading this in the future, it's a joke)

[xHomu]

Well, he's not wrong!

[duailibe]

@pcattori isn't that the whole reason we have .ts and .tsx files, though? (to disambiguate JSX vs non-JSX files)

Looking at the screen @xHomu posted, the compiler is parsing a .ts as a JSX file, which is the real bug here.

[pcattori]

@duailibe unfortunately, there's a ton of existing apps and libraries that use .js and .ts files for JSX and its not uncommon for other tools and frameworks to try to parse JSX in .js and .ts files. We've received issues in the past for not supporting JSX in .js and .ts files for this reason (e.g. #7051). So the decision was made to support JSX in .ts and .js files too.

[AlemTuzlak]

.jsx I get but how can you have jsx in ts files without ts going crazy and complaining on you? I get why you made the decision but why would people ask for tsx in ts support when there is a clear destinction between the two

[duailibe]

@pcattori I understand the reasoning for .js files (since it's very unlikely that the parser will get confused by syntax - at least I'm not aware of any), but I strongly disagree with the decision for .ts files as it's fairly common practice to use the .tsx extension.

IMHO the best heuristics would be:

loader: path.endsWith(".js") || path.endsWith(".jsx") ? "jsx" : path.endsWith(".tsx") ? "tsx" : "ts"

or something similar (again, best in my opinion anyway).

[pcattori]

To be clear, #7051 was a bug fix for a breaking change. The decision to support JSX in .js and .ts files was implicitly made long ago, before I was part of the Remix team. To drop support for JSX in .ts would constitute a breaking change for users on versions 1.19.0 or earlier.

[duailibe]

@pcattori Sorry for insisting but that's not why I see in my 1.19.3 app. Just rename a .tsx file to .ts:

❯ npx remix build
 info  building... (NODE_ENV=production)
✘ [ERROR] Expected ">" but found "className"

    app/components/location-selector.ts:22:9:
      22 │     <div className="flex bg-[#e7b348] h-8 items-center justify-cen...
         │          ~~~~~~~~~
         ╵          >

[AlemTuzlak]

@pcattori Sorry for insisting but that's not why I see in my 1.19.3 app. Just rename a .tsx file to .ts:

❯ npx remix build
 info  building... (NODE_ENV=production)
✘ [ERROR] Expected ">" but found "className"

    app/components/location-selector.ts:22:9:
      22 │     <div className="flex bg-[#e7b348] h-8 items-center justify-cen...
         │          ~~~~~~~~~
         ╵          >

This would be the behaviour I would expect if there was JSX in a TS file, didn't even know theres a way to go around it

[pcattori]

Ah ok then maybe I misspoke earlier. I assumed we had supported JSX in .ts before. Since that's not the case, I agree that we shouldn't parse .ts files with the tsx loader.

[duailibe]

@pcattori thanks for the patience!

I believe that would align with how the loaders are configured for the build:

remix/packages/remix-dev/compiler/utils/loaders.ts

Lines 21 to 22 in 848c8ea

	".js": "jsx",
	".jsx": "jsx",

remix/packages/remix-dev/compiler/utils/loaders.ts

Lines 38 to 39 in 848c8ea

	".ts": "ts",
	".tsx": "tsx",

[pcattori]

Fixed by #7306

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.4 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[xHomu]

Can confirm 2.0.0-pre.4 resolved this

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-6c0310c-20230901 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.6 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-9288516-20230902 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.7 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.7 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-481f73e-20230906 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.8 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-1a57073-20230907 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.9 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-1fac238-20230908 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.0.0-pre.10 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-3646f91-20230914 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!