Finally, a guide for Node.js and TypeScript and ESM that works

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • bun

    Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one

  • TL;DR: It is too buggy.

    I tried it and ran into many issues. For example:

    - Incompatibility of transpiled artifacts with the Node runtime (many bugs were fixed, but I haven't tried again). I don't trust bun as a runtime.

    - Broken monorepo support.

    - No direct react support; you still need react-scripts/webpack/whatever. They have documentation on transpiling react, but it isn't the same.

    - No type checking, as with many other tools.

    Also, filter their issue tracker for bugs: https://github.com/oven-sh/bun/issues?q=is%3Aissue+is%3Aopen...

  • tsx

    ⚡️ TypeScript Execute: Node.js enhanced to run TypeScript & ESM

  • I really enjoy frontend/node/typescript development. I roll my eyes whenever the HN-types complain about CSS or frontend development being a hellhole. Mostly the comments I see seem ignorant or impatient ("Why doesn't this thing work without be bothering to learn it?")

    However, the intersection of typescript, nodejs, and ES modules is consistently the most frustrating experience I ever have. Trying to figure out which magic incantation of tsconfig/esbuild/tsc/node options will let me just write code and run it is a fools errand. You might figure something out, and then you try to use Jest and then you descend into madness again.

    The biggest tip I can give people is to ditch ts-node and just use (the awkwardly named) tsx https://github.com/privatenumber/tsx, which pretty much just "mostly works" for running Typescript during dev for node.

    The problem mostly seems to stem for all the stakeholders being pretty dogmatic to whatever their goals are, rather than the pragmatic option of just meeting people where they are. I really wish the Node, Typescript, Deno/Bun, and maybe some bundler people would come together and figure out how to make this easier for people.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • node_monorepo

  • This is the current setup I'm using for my TypeScript monorepo: https://github.com/tommyguo/node_monorepo. I tried avoiding Lerna because I didn't feel like I needed it. Happy to hear feedback!

  • tsm

    TypeScript Module Loader

  • esyes

    Run your TypeScript files quickly and with more positivity

  • I'm using `esyes` [0] by Yehuda Katz and the logic is simple and it works very well.

    [0] https://github.com/starbeamjs/esyes

  • tsconfig

    Shared TypeScript config for my projects (by sindresorhus)

  • Many people in this thread are rightly complaining that this does not answer the "why does this work". Having a working example is a good start for that though as at least you have a known target and as you change things (and break things), you can see what those options did.

    One problem with this guide that makes that trickier is that the tsconfig.json itself imports https://github.com/sindresorhus/tsconfig/blob/5c87dc118e057d... and overrides a bunch of values.

    So if you really want to understand what it's doing, you need to get rid of that dependency and inline / merge that config file. That would also add stability to your project as it's one less upstream dependency out of your control (and a big one at that as it controls how you entire project is built!).

  • documentation-framework

    "The Grand Unified Theory of Documentation" (David Laing) - a popular and transformative documentation authoring framework

  • https://documentation.divio.com/ is a good overview of the "four types of documentation" paradigm: tutorials, how-to guides, explanations, and reference have to all exist.

    One of my major gripes with the JS/TS ecosystem is that "explanations" are sorely lacking. See https://www.typescriptlang.org/tsconfig for the relevant documentation for tsconfig files. Tutorials are on the page, how-to guides abound on the wider internet (like the OP), and the linked TSConfig Reference and JSON Schema (used in code completion in IDEs) are together absolutely massive.

    But an explanation is missing! There is no official documentation about how different options interact to say: as I'm walking a file tree as the Typescript compiler, this is how I will interpret a certain file I encounter, what will be outputted, and how that will be interpreted by bundlers and browsers, especially in an ESM world.

    https://medium.com/extra-credit-by-guild/tsconfig-json-demys... is in the right direction, but outdated as ESM has become much more popular in the past 3 years, and still organized by option (so it's already somewhat in the "reference" world).

    IMO even independent of documentation, the industry's move to ESM is problematic: https://gist.github.com/joepie91/bca2fda868c1e8b2c2caf76af7d... describes many of the issues. But they're certainly exacerbated by good explanation-style documentation that helps people understand how ESM works under the hood!

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • esno

    Alias to `tsx`

  • Love this project, used it quite a bit. However I always opt for using esno[1] instead, merely because of the name; having two tools share the same name throws me off.

    [1] https://github.com/esbuild-kit/esno

  • modglot

    UMD-ESM polyglot

  • One problem I encountered with ESM TypeScript development on the browser without bundling: many Node packages aren't set up for that.

    You might ask why without bundling?

    Sometimes you just want to start something simple on the browser and compile to JavaScript on the fly.

    I tried the dev server from Modern Web [0], and I liked it. I program in TypeScript and the browser reloads whenever I save a file. Of course I could set up a bundler and for a small program waiting times are negligible. But I hate bundlers. I know it's irrational, but nowadays I program for fun so I think I should have the choice to reject bundlers.

    This fails for many Node dependencies. There is a conflict between CommonJS and ESM. I am not 100% sure that what I want to achieve is impossible without forking dependencies and making a small change.

    I even found a way to have a CommonJs and ESM polyglot, but this hack is extremely ugly, so my intellectual curiosity is satisfied. I named the hack modglot [1]. I don't think this is a good idea and I don't understand enough to propose something. I am somewhat dejected about the current state of TypeScript development for the browser and paused development.

    Now I am programming in Rust again just for fun, but if I return to TypeScript, probably I will try out Deno.

    [0]: https://modern-web.dev/guides/dev-server/getting-started/

    [1]: https://github.com/nalply/modglot

  • template-typescript-monorepo

    Template repo with the latest tech working together

  • I did some experiments myself and settled on this template repository:

    https://github.com/bhouston/template-typescript-monorepo

    This has a lot of features that work well together:

  • deno-arm64

    Discontinued ARM64 builds for Deno

  • I haven't specifically tested it but it _should_ be supported. I don't have easy access to graviton instances at this moment, but I've previously used https://github.com/LukeChannings/deno-arm64 with great success.

    As long as your ARM OS is 64-bit, Deno should function properly. 32-bit _might_ be supported, but TBH we don't do any testing of those configurations as far as I'm aware.

  • jest

    Delightful JavaScript Testing.

  • As someone who uses Jest and alternatively enjoys and is frustrated by it, this isn't all Jest's fault. Node is just now releasing fixes for [significant memory leaks](https://github.com/jestjs/jest/issues/11956#issuecomment-180...) around ESM support within the [VM APIs](https://nodejs.org/api/vm.html) that Jest depends on.

  • prepackage-checks

  • The good news is that one may use `expect` with Node's built-in test runner -- the result feels fairly similar to using expect with Jest.

    Indeed, Node's test support can handle dynamic test creation, so one can do crazy things like https://github.com/andrewaylett/prepackage-checks/blob/main/... -- that dynamically asynchronously executes NPM builds from subdirectories, loading and running per-build expectations.

    let me HN it for you - https://hn.algolia.com/?dateRange=pastYear&page=0&prefix=tru...

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts