babel-preset-kyt

1.1.21 verified Sat Apr 25 auth: no javascript

An opinionated Babel preset for kyt, the NY Times frontend toolkit. Current stable version is 1.1.21 (last released May 2025). It provides a pre-configured Babel setup for React and TypeScript projects, supporting both ESM and CJS modules. Key differentiators: tightly integrated with kyt for zero-config transpilation, includes presets for environment-specific builds (browser, node), and handles module transforms. Alternatives like @babel/preset-env and @babel/preset-react require manual configuration.

Common errors

error Error: Cannot find module 'babel-preset-kyt' ↓

cause Missing package installation

fix

npm install babel-preset-kyt --save-dev

error Error: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using ESM import to load preset

fix

Use require() or configure via .babelrc/babel.config.js (CommonJS).

error SyntaxError: Unexpected token import ↓

cause Preset not applied; possibly missing configuration

fix

Verify .babelrc or babel.config.js includes 'babel-preset-kyt' in presets array.

Warnings

gotcha Preset is CommonJS only; ESM import will fail with 'require is not defined' error. ↓

fix Use require() or configure via .babelrc/babel.config.js.

gotcha Options must be passed as array elements: [preset, options]. Direct object after preset string is ignored. ↓

fix Use nested arrays: "presets": [["babel-preset-kyt", { ... }]]

gotcha If using TypeScript, ensure @babel/preset-typescript is installed separately. ↓

fix npm install @babel/preset-typescript --save-dev and add to presets array.

Install

npm install babel-preset-kyt

yarn add babel-preset-kyt

pnpm add babel-preset-kyt

Imports

default export
wrong
```
import preset from 'babel-preset-kyt'
```
correct
```
module.exports = require('babel-preset-kyt')
```
Preset is CommonJS; ESM import is not supported directly. Use require() or use .babelrc presets array.
preset in .babelrc
wrong
```
{"presets": ["kyt"]}
```
correct
```
{"presets": ["babel-preset-kyt"]}
```
Use full package name to avoid resolution ambiguity.

preset with options

wrong

{"presets": ["babel-preset-kyt", { "modules": false }]}

correct

{"presets": [["babel-preset-kyt", { "modules": false }]]}

Options must be in an array: [preset, options].

Quickstart

Configures babel-preset-kyt in .babelrc and babel.config.js with environment-specific targets.

// .babelrc
{
  "presets": ["babel-preset-kyt"]
}

// Or in babel.config.js
module.exports = {
  presets: ["babel-preset-kyt"],
  // optionally override env targets
  env: {
    browser: {
      presets: [["babel-preset-kyt", { targets: "> 0.25%, not dead" }]]
    },
    node: {
      presets: [["babel-preset-kyt", { targets: { node: "current" } }]]
    }
  }
}