ContextQMD
Back to Tsx

Frequently Asked Questions

docs/faq.md

4.23.1111.3 KB
Original Source
<script setup lang="ts"> import ImageLink from './.vitepress/theme/components/ImageLink.vue'; </script>

Frequently Asked Questions

How can I do ______ in tsx?

We understand that searching for answers about tsx can be challenging due to its name. However, since tsx is essentially an alias for node and adheres to TypeScript behavior, asking how to do something in tsx might not be the best approach.

Instead, consider these questions:

  • "How can I do ______ in Node.js?"
  • "How can I do ______ in TypeScript?"

If your question specifically relates to tsx, you can use the search feature in the documentation or ask a question.

Why is my default import an object?

When an ES module imports a CommonJS package, Node.js provides the package's complete module.exports value as the default import. This works for conventional CommonJS packages, including packages that export a function directly.

Some legacy packages compile export default to exports.default instead of assigning the value to module.exports. In an ES module, that leaves the callable value at packageDefault.default. The esModuleInterop TypeScript option does not change imports that run as native ES modules.

Prefer a documented named export when the package provides one. Otherwise, report the package's export mismatch to its maintainer. Package authors should publish explicit exports entries for CommonJS and ESM consumers, with matching type declarations.

I found a bug in tsx. What should I do?

If you've confirmed that the bug is in tsx, please file an issue in the tsx GitHub repository. Make sure to include a minimal reproduction of the bug.

<a class="button bug-report" href="https://github.com/privatenumber/tsx/issues/new?assignees=&labels=bug%2Cpending+triage&projects=&template=bug-report.yml" target="_blank"> File a bug report ↗ </a>

Who uses tsx?

tsx is recognized by both Node.js and TypeScript as a popular tool for running TypeScript code. It is widely adopted, as indicated by its npm download stats: <a href="https://npm.im/tsx"></a>.

Companies

<div class="logos dark-zebra-pattern"> <ImageLink alt="Vercel" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Avercel&type=code" img-src="/logos/vercel.svg" /> <ImageLink alt="Google" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Agoogle&type=code" img-src="/logos/google.svg" /> <ImageLink alt="GitHub" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Agithub&type=code" img-src="/logos/github.svg" /> <ImageLink alt="Square" href="https://github.com/square" img-src="/logos/square.svg" /> <ImageLink alt="Supabase" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Asupabase&type=code" img-src="/logos/supabase.svg" /> <ImageLink alt="Astro" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Awithastro&type=code" img-src="/logos/astro.svg" /> <ImageLink alt="OpenAI" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Aopenai&type=code" img-src="/logos/openai.svg" /> <ImageLink alt="IBM" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Aibm&type=code" img-src="/logos/ibm.svg" /> <ImageLink alt="Codecov" href="https://github.com/codecov" img-src="/logos/codecov.svg" /> <ImageLink alt="Amazon AWS" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Aaws+OR+org%3Aawslabs&type=code" img-src="/logos/aws.svg" /> <ImageLink alt="Sentry" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Agetsentry&type=code" img-src="/logos/sentry.svg" /> <ImageLink alt="Microsoft" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Amicrosoft&type=code" img-src="/logos/microsoft.svg" /> <ImageLink alt="Meta" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Afacebook&type=code" img-src="/logos/meta.svg" /> <ImageLink alt="Alibaba" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Aalibaba&type=code" img-src="/logos/alibaba.svg" /> <ImageLink alt="Mozilla" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Amozilla&type=code" img-src="/logos/mozilla.svg" /> <ImageLink alt="Figma" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Afigma&type=code" img-src="/logos/figma.svg" /> <ImageLink alt="Cloudflare" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Acloudflare&type=code" img-src="/logos/cloudflare.svg" /> <ImageLink alt="Salesforce" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Asalesforce&type=code" img-src="/logos/salesforce.svg" /> </div>

Projects

<div class="logos dark-zebra-pattern"> <ImageLink alt="Node.js" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Anodejs&type=code" img-src="/logos/nodejs.svg" /> <ImageLink alt="Electron" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Aelectron&type=code" img-src="/logos/electron.svg" /> <ImageLink alt="Vite" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Avitejs&type=code" img-src="/logos/vite.svg" /> <ImageLink alt="Mermaid" href="https://github.com/mermaid-js/mermaid/blob/3809732e48a0822fad596d0815a6dc0e166dda94/package.json#L121" img-src="/logos/mermaid.svg" /> <ImageLink alt="Vue.js" href="https://github.com/vuejs/core/blob/70641fc0deb857464d24aa7ab7eaa18e2a855146/package.json#L110" img-src="/logos/vue.svg" /> <ImageLink alt="11ty" href="https://www.11ty.dev/docs/languages/typescript/" img-src="/logos/11ty.svg" /> <ImageLink alt="Vitest" href="https://github.com/search?q=path%3Apackage.json+%22%5C%22tsx%5C%22%3A+%5C%22%22+org%3Avitest-dev&type=code" img-src="/logos/vitest.svg" /> <ImageLink alt="date-fns" href="https://github.com/date-fns/date-fns/blob/5c1adb5369805ff552737bf8017dbe07f559b0c6/package.json#L6123" img-src="/logos/date-fns.svg" /> <ImageLink alt="Cheerio" href="https://github.com/cheeriojs/cheerio/blob/d0b3c2f6b57cd1f835741175d463963266be0eef/package.json#L99" img-src="/logos/cheerio.svg" /> <ImageLink alt="Zod" href="https://github.com/colinhacks/zod/blob/7173d0bcc2105777102e22d36a2866196e2830f3/package.json#L45" img-src="/logos/zod.svg" /> <ImageLink alt="WebDriverIO" href="https://github.com/webdriverio/webdriverio/blob/5955cda26a538a12b10d686a394beb1b109fe49d/package.json#L122" img-src="/logos/webdriverio.svg" /> <ImageLink alt="Knip" href="https://github.com/webpro-nl/knip/blob/b9b8f4da3dcbff1af309bfbb7890bb9ec36124f9/packages/knip/package.json#L48" img-src="/logos/knip.svg" /> <ImageLink alt="ArkType" href="https://github.com/arktypeio/arktype/blob/1820e86e93e1ccaabda7f8de28fb7f04320d6fc8/package.json#L59" img-src="/logos/arktype.svg" /> <ImageLink alt="Prisma" href="https://github.com/prisma/prisma/blob/f19a3e28a37327eb0a5e45941c0e4abf3dbab136/package.json#L94" img-src="/logos/prisma.svg" /> </div>

To find more examples of where & how tsx is used, search on GitHub.

How does tsx compare with ts-node?

tsx and ts-node are both tools for running TypeScript in Node.js, each offering different approaches to suit user preferences.

Installation

  • tsx: Can be used without installation (via npx tsx ./script.ts) and comes as a single binary with no peer dependencies.
  • ts-node: Requires installation of TypeScript or SWC as peer dependencies.

Configuration

  • tsx: Works out of the box without needing a tsconfig.json file, making it easy for beginners.
  • ts-node: May require initial setup and configuration.

Defaults

  • tsx: Uses sensible defaults based on file imports and Node.js version, reducing the need for certain tsconfig.json settings.
  • ts-node: Relies on TypeScript's defaults, which might need adjusting.

Module Support

  • tsx: Automatically adapts between CommonJS and ESM modules, supporting require() for ESM modules.
  • ts-node: Provides module support but may need configuration for certain scenarios.

Syntax and Features

  • tsx: Supports new JS & TS syntax and features based on Node.js version and includes support for tsconfig.json paths.
  • ts-node: Uses the TypeScript compiler and may require additional settings for certain features.

Speed

  • tsx: Uses esbuild for fast compilation and does not perform type checking.
  • ts-node: Uses the TypeScript compiler by default, with an option to use the SWC compiler for faster performance.

Watcher

As a DX bonus, tsx also comes with Watch mode to help you iterate faster!

For a detailed technical comparison, refer to this exhaustive comparison between tsx, ts-node, and other runtimes.

Can/should tsx be used in production?

Deciding whether to use tsx in production depends on your specific needs and risk tolerance. Here are a few points to consider:

  • tsx is simply a Node.js enhancement, so you can generally expect a similar level of stability.
  • tsx uses esbuild for transforming TypeScript and ESM. Although esbuild is already adopted in many production ready tools, keep in mind that it technically hasn't reached a stable release yet.

Here are some questions to help guide your decision:

  • What are the benefits versus the costs of using tsx in production? Are there performance improvements?
  • Does tsx run your code as expected? Are there any differences between development and production environments?
  • Can you rely on this open-source project and its maintainers? Consider sponsoring the project to support its growth and stability.

Ultimately, it's a decision you'll need to make based on your specific production requirements and comfort level with potential risks.

Ask a question

tsx offers support via Discussions for sponsors. If you're a sponsor, feel free to ask more questions there!

<style scoped> .bug-report { @apply text-sm text-white hover:text-white bg-blue-500 hover:bg-blue-600 ; } .logos { @apply flex flex-wrap gap-x-4 gap-y-6 justify-around my-4 py-6 px-4 dark:bg-zinc-800; & :deep(img) { @apply h-10; } } </style>