babel-preset-enact

0.1.16 verified Sat Apr 25 auth: no javascript

Babel preset used by the Enact framework for building React-based applications. Current stable version is 0.1.16, with maintenance releases updating dependencies. It provides a pre-configured set of Babel plugins and presets optimized for Enact projects. Key differentiators include tailored support for Enact's component model and seamless integration with Enact CLI, which includes it by default. For non-Enact projects, it can be installed separately to leverage similar transforms. Releases are infrequent, focusing on dependency updates rather than feature additions.

Common errors

error Error: Cannot find module '@babel/preset-enact' ↓

cause Using incorrect preset name in .babelrc

fix

Use full package name: "babel-preset-enact" instead of just "enact".

error Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] ...: Preset .enact requires a module of type 'object' but got 'string' ↓

cause Invalid configuration format or missing require statement

fix

In .babelrc, ensure presets array contains strings, not objects. Example: { "presets": ["babel-preset-enact"] }

error SyntaxError: Unexpected token (1:1) > 1 | import kind from '@enact/core/kind'; | ^ ↓

cause Babel is not transpiling ES modules, possibly due to missing preset or incorrect configuration

fix

Ensure .babelrc includes 'babel-preset-enact' and that @babel/core is installed.

Warnings

deprecated Deprecated Babel plugins included ↓

fix Update to version 0.1.10 or later to remove deprecated plugins like @babel/plugin-transform-react-inline-elements.

gotcha This preset is designed specifically for Enact projects. Using it with non-Enact React apps may result in unexpected behavior or missing configuration. ↓

fix Ensure your project depends on @enact/core and other Enact packages, or use a more generic preset like @babel/preset-react.

breaking Removal of @babel/plugin-transform-react-inline-elements in 0.1.10 causes production build errors with React 19 ↓

fix Upgrade React to a version compatible with the removal, or if using React 19, consider adding the plugin back manually.

breaking Replaced deprecated ESLint rules with @stylistic/js rules in version 0.1.8 ↓

fix Update your ESLint config to use @stylistic/js rules if you rely on the replaced rules.

deprecated The package babel-preset-enact may be superseded by built-in Babel configuration in Enact CLI ↓

fix For Enact CLI projects, do not install this preset separately; the CLI includes it automatically.

Install

npm install babel-preset-enact

yarn add babel-preset-enact

pnpm add babel-preset-enact

Imports

Preset
wrong
```
import Preset from 'babel-preset-enact'
```
correct
```
module.exports = require('babel-preset-enact')
```
ESM import is not supported; use CommonJS require or configure in .babelrc as a string preset name.
Configuration
wrong
```
{
  "presets": ["enact"]
}
```
correct
```
{
  "presets": ["babel-preset-enact"]
}
```
In .babelrc, use the full package name 'babel-preset-enact', not the short 'enact'.

env

wrong

{
  "presets": ["babel-preset-enact", "@babel/preset-env"]
}

correct

{
  "presets": ["babel-preset-enact", "module:preset-env"]
}

When combining presets, ensure correct ordering and avoid redundant preset-env inclusion.

Quickstart

Shows how to install and configure babel-preset-enact in a non-Enact CLI project, including a basic React component.

// Install dependencies
npm install --save-dev babel-preset-enact @babel/core

// Create .babelrc in project root
{
  "presets": ["babel-preset-enact"]
}

// Sample React component using Enact
import kind from '@enact/core/kind';
import Button from '@enact/agate/Button';

const MyApp = kind({
  name: 'MyApp',
  render: () => (
    <div>
      <Button>Click me</Button>
    </div>
  )
});

export default MyApp;

// Build with Babel
npx babel src --out-dir lib