babel-preset-cx-env

26.1.0 verified Sat Apr 25 auth: no javascript

A Babel preset for compiling CxJS applications, version 26.1.0. Integrates @babel/proposal-class-properties, @babel/proposal-function-bind, @babel/transform-react-jsx, babel-plugin-transform-cx-jsx, and babel-plugin-transform-cx-imports. Released as part of CxJS tooling, updated alongside framework versions. Unlike generic React presets, it specifically transforms CxJS JSX and imports. Peer dependencies include @babel/core and @babel/preset-env.

Common errors

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

cause Using ES6 import in babel.config.js instead of CommonJS require.

fix

Use module.exports = { presets: [['babel-preset-cx-env', options]] }

error Error: Preset babel-preset-cx-env is not installed. ↓

cause Missing peer dependency @babel/preset-env or @babel/core.

fix

npm install @babel/core @babel/preset-env --save-dev

Warnings

gotcha Options object must be nested inside an array as second element, not directly as presets value. ↓

fix Use presets: [['babel-preset-cx-env', { cx: {...} }]]

deprecated babel-plugin-transform-cx-imports may be deprecated in future versions; use babel-plugin-cx-imports instead. ↓

fix Monitor changelog, consider migration to babel-plugin-cx-imports if announced.

Install

npm install babel-preset-cx-env

yarn add babel-preset-cx-env

pnpm add babel-preset-cx-env

Imports

default

wrong

import babelPresetCxEnv from 'babel-preset-cx-env'

correct

module.exports = { presets: [['babel-preset-cx-env', options]] }

Used in babel.config.js (CommonJS). ESM not supported in Babel config files.

preset
wrong
```
presets: ['babel-preset-cx-env']
```
correct
```
presets: [['babel-preset-cx-env', { cx: { jsx: { trimWhitespace: false } } }]]
```
Options object is second element of array; omitting options is allowed but loses customization.

Quickstart

Shows configuration of babel-preset-cx-env with options for JSX whitespace and import source.

// babel.config.js
module.exports = {
  presets: [
    ['babel-preset-cx-env', {
      cx: {
        jsx: {
          trimWhitespace: false
        },
        imports: {
          useSrc: true
        }
      }
    }]
  ]
};