Registry / web-framework / babel-preset-focus

babel-preset-focus

library1.0.0jsnpmunverified

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.

web-framework

npm install babel-preset-focus

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-FOCUS

babel-preset-focus

web-frameworkjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default export

✓ module.exports = require('babel-preset-focus')

✗ import preset from 'babel-preset-focus'

This package uses CommonJS exports and is meant for .babelrc configuration, not direct import.

preset config in .babelrc

✓ { "presets": ["babel-preset-focus"] }

✗ { "presets": ["focus"] }

Babel resolves presets by full package name; shorthand may not work.

with legacy exports

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

✗ Setting LEGACY_EXPORTS after import

Environment variables must be set before requiring the preset.

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

Debug

Known issues

breakingPolyfill 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.

affects: 1.0.0

deprecatedEnvironment variable LEGACY_EXPORTS must be set to 'true' if using require/module.exports

fix

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

affects: >=1.0.0

deprecatedEnvironment variable LEGACY_LODASH must be set to 'true' if using Lodash 3.x

fix

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

affects: >=1.0.0

breakingThe preset is CommonJS only; direct ES module imports will fail

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'babel-preset-focus'

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: Requires Babel 7.x but was loaded with Babel 6.x

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

fix

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

ReferenceError: regeneratorRuntime is not defined

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.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

@babel/corerequiredBabel core required to use any preset

@babel/preset-envrequiredTranspile modern JavaScript to older syntax

@babel/preset-reactrequiredTranspile JSX and React-specific transformations

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/KleeGroup/babel-focus ↗

packagehttps://www.npmjs.com/package/babel-preset-focus ↗

homepagehttps://kleegroup.com ↗