babel-preset-focus

1.0.0 verified Sat Apr 25 auth: no javascript maintenance

Babel preset for Focus, a React component framework by KleeGroup. Current stable version is 1.0.0, released as a major rewrite with breaking changes from v0.x. It handles JSX, modern JavaScript (ES2015+), and Focus-specific optimizations. Differentiators include environment variables to enable legacy support (LEGACY_EXPORTS for CommonJS, LEGACY_LODASH for Lodash 3.x) and removal of the built-in polyfill in favor of webpack-focus. The package has a low release cadence, with only a few releases since 2017.

Common errors

error Cannot find module 'babel-preset-focus' ↓

cause Package not installed or Babel cannot resolve the preset name.

fix

Run 'npm install babel-preset-focus --save-dev' and ensure .babelrc uses the full name 'babel-preset-focus'.

error Error: Requires Babel 7.x but was loaded with Babel 6.x ↓

cause This preset targets Babel 7+, but older Babel is installed.

fix

Upgrade to Babel 7 or downgrade preset to v0.7.0.

error ReferenceError: regeneratorRuntime is not defined ↓

cause The preset does not include a polyfill; regeneratorRuntime is needed for async/await.

fix

Install @babel/polyfill or use @babel/plugin-transform-runtime with @babel/runtime.

Warnings

breaking Polyfill file removed: focus-polyfill no longer exists. Polyfill is handled by webpack-focus. ↓

fix Remove any references to 'focus-polyfill' and ensure webpack-focus is configured correctly.

deprecated Environment variable LEGACY_EXPORTS must be set to 'true' if using require/module.exports ↓

fix Set process.env.LEGACY_EXPORTS = 'true' before requiring the preset.

deprecated Environment variable LEGACY_LODASH must be set to 'true' if using Lodash 3.x ↓

fix Set process.env.LEGACY_LODASH = 'true' before requiring the preset.

breaking The preset is CommonJS only; direct ES module imports will fail ↓

fix Use require() or configure Babel with the preset name string.

Install

npm install babel-preset-focus

yarn add babel-preset-focus

pnpm add babel-preset-focus

Imports

default export
wrong
```
import preset from 'babel-preset-focus'
```
correct
```
module.exports = require('babel-preset-focus')
```
This package uses CommonJS exports and is meant for .babelrc configuration, not direct import.
preset config in .babelrc
wrong
```
{ "presets": ["focus"] }
```
correct
```
{ "presets": ["babel-preset-focus"] }
```
Babel resolves presets by full package name; shorthand may not work.

with legacy exports

wrong

Setting LEGACY_EXPORTS after import

correct

process.env.LEGACY_EXPORTS = 'true'; module.exports = require('babel-preset-focus')

Environment variables must be set before requiring the preset.

Quickstart

Configures Babel with the focus preset, including optional environment variables for legacy support.

// .babelrc
{
  "presets": [
    ["babel-preset-focus", {
      "env": {
        "LEGACY_EXPORTS": process.env.LEGACY_EXPORTS === 'true' ? 'true' : 'false',
        "LEGACY_LODASH": process.env.LEGACY_LODASH === 'true' ? 'true' : 'false'
      }
    }]
  ]
}

// Then run: BABEL_ENV=production LEGACY_EXPORTS=false LEGACY_LODASH=false babel src -d lib