babel-preset-granite

1.0.22 verified Sat Apr 25 auth: no javascript

Babel preset for Granite, a React Native toolkit. Version 1.0.22. This preset configures Babel for Granite projects, including necessary plugins and transforms. It is part of the Granite ecosystem maintained by Viva Republica (Toss). The preset is designed to work seamlessly with Granite's build system and custom metro configuration. It should be used alongside other Granite packages like @granite/everywhere. No known major alternatives as it is specific to Granite.

Common errors

error Module not found: Can't resolve 'babel-preset-granite' ↓

cause The package is not installed or not in node_modules.

fix

Run 'npm install babel-preset-granite' or 'yarn add babel-preset-granite'.

error Error: Preset 'granite' not found ↓

cause Using the short name 'granite' but the package is not installed.

fix

Install the package and ensure babel.config.js uses the correct path or name.

Warnings

gotcha Preset name resolution: Using full package name 'babel-preset-granite' works but is not recommended. Babel expects the short name 'granite'. ↓

fix Use 'granite' in presets array: presets: ['granite'].

deprecated As of Granite 0.1.x, some Babel plugins have been moved to runtime (e.g., asyncIterator polyfill). Ensure preset version matches Granite version. ↓

fix Update both babel-preset-granite and @granite/* packages to compatible versions.

Install

npm install babel-preset-granite

yarn add babel-preset-granite

pnpm add babel-preset-granite

Imports

default
wrong
```
import preset from 'babel-preset-granite'
```
correct
```
module.exports = require('babel-preset-granite')
```
Babel presets are typically required via module.exports in .babelrc.js or babel.config.js. Although the package may ship TypeScript types, using ESM import syntax may not work depending on Node version and module resolution.
granitePreset
wrong
```
module.exports = { presets: ['babel-preset-granite'] }
```
correct
```
module.exports = { presets: ['granite'] }
```
Babel will resolve the preset name 'granite' to the package 'babel-preset-granite' automatically. Using the full package name is unnecessary but still works.

granitePreset with options

wrong

module.exports = { presets: [['babel-preset-granite', { option: true }]] }

correct

module.exports = { presets: [['granite', { option: true }]] }

Use the short name 'granite' in the presets array. Options are passed as the second element of the tuple.

Quickstart

Shows how to configure Babel to use the Granite preset via the shorthand name 'granite'.

// In babel.config.js
module.exports = {
  presets: ['granite'],
}