Can nodejs ( version > 23) also run *.tsx ("jsx": "react") files natively?

[vadimkantorov]

I found out at https://nodejs.org/en/learn/typescript/run-natively that starting with version 23, nodejs can run TypeScript (*.ts) scripts natively without prior transpilation.

I wonder, how can I make it run/import *.tsx files natively? Is it supported? I realize that it's actually some mixture of TypeScript and JSX. How would you recommend running on nodejs TypeScript scripts importing stuff from *.tsx companion files (for server-side SSG-like rendering using https://github.com/facebook/lexical).

tsconfig.json might contain "jsx" : "react", what should be the equivalent for native nodejs?

Thanks!

[piotrmaciejbednarski]

The experimental Node option uses a TypeScript wrapper called Amaro (https://github.com/nodejs/amaro).
I see that there is one example in the code (https://github.com/nodejs/amaro/tree/main/deps/swc/bindings/binding_core_wasm/example) which theoretically uses JSX and in the corresponding tsconfig.json loaded inline there is a jsx option.

However, this is an example for SWC, not Amaro, because Amaro is actually a development of the TypeScript parser SWC (https://swc.rs/) for WebAssembly. In the SWC documentation there is a mention of support for JSX (https://swc.rs/blog/swc-1#what-can-swc-do) so theoretically Node.js v23 should support transpilation of JSX, as well as TSX. You may also be interested in the NanoJSX library (https://nanojsx.io/), which is a lightweight library for rendering JSX on the server side, it is easy to implement.

[piotrmaciejbednarski]

While I continue reading the documentation, it seems that .tsx is not supported by the experimental option. But as you can see, it's easy to add such an option in the future.

https://nodejs.org/api/typescript.html#type-stripping

[vadimkantorov]

I think it would be a very useful feature. For a non-webdev (myself), just needing to do some one-off mini-project, the current various module systems/installer/bundler/transpilation ecosystem is extremely complex and intimidating. Error messages are often cryptic and everything-depends-on-everything.

Any work towards simplification and improving the "default" tools (like node) would bring immense value, in my opinion! Hoping that amaro/node adds native JSX/TSX/react support with some examples of basic script running - especially if tsconfig.json/"jsx" : "react" is supported by amaro/swc.

My current working solution is at https://github.com/vadimkantorov/lexical-cli-render, but I also had to fight with ts-node to get it working: TypeStrong/ts-node#2086

(with "type": "module" ts-node does not work, but when I delete it, node starts printing a warning about having to re-detect the module system)

[piotrmaciejbednarski]

You're right, I would use it myself in many projects and it would allow me to slim down the project, but I would need to be sure that after such transpilation the stub size is the same to maintain hash compatibility and guarantee compatibility. If you liked my answer you can mark it as "Answered"

[piotrmaciejbednarski]

The whole topic of native TS in Node.js
nodejs/loaders#217