{"id":19295,"library":"babel-preset-focus","title":"babel-preset-focus","description":"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.","status":"maintenance","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/KleeGroup/babel-focus","tags":["javascript","babel","react","focus"],"install":[{"cmd":"npm install babel-preset-focus","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-focus","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-focus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Babel core required to use any preset","package":"@babel/core","optional":false},{"reason":"Transpile modern JavaScript to older syntax","package":"@babel/preset-env","optional":false},{"reason":"Transpile JSX and React-specific transformations","package":"@babel/preset-react","optional":false}],"imports":[{"note":"This package uses CommonJS exports and is meant for .babelrc configuration, not direct import.","wrong":"import preset from 'babel-preset-focus'","symbol":"default export","correct":"module.exports = require('babel-preset-focus')"},{"note":"Babel resolves presets by full package name; shorthand may not work.","wrong":"{ \"presets\": [\"focus\"] }","symbol":"preset config in .babelrc","correct":"{ \"presets\": [\"babel-preset-focus\"] }"},{"note":"Environment variables must be set before requiring the preset.","wrong":"Setting LEGACY_EXPORTS after import","symbol":"with legacy exports","correct":"process.env.LEGACY_EXPORTS = 'true'; module.exports = require('babel-preset-focus')"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\n    [\"babel-preset-focus\", {\n      \"env\": {\n        \"LEGACY_EXPORTS\": process.env.LEGACY_EXPORTS === 'true' ? 'true' : 'false',\n        \"LEGACY_LODASH\": process.env.LEGACY_LODASH === 'true' ? 'true' : 'false'\n      }\n    }]\n  ]\n}\n\n// Then run: BABEL_ENV=production LEGACY_EXPORTS=false LEGACY_LODASH=false babel src -d lib","lang":"javascript","description":"Configures Babel with the focus preset, including optional environment variables for legacy support."},"warnings":[{"fix":"Remove any references to 'focus-polyfill' and ensure webpack-focus is configured correctly.","message":"Polyfill file removed: focus-polyfill no longer exists. Polyfill is handled by webpack-focus.","severity":"breaking","affected_versions":"1.0.0"},{"fix":"Set process.env.LEGACY_EXPORTS = 'true' before requiring the preset.","message":"Environment variable LEGACY_EXPORTS must be set to 'true' if using require/module.exports","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Set process.env.LEGACY_LODASH = 'true' before requiring the preset.","message":"Environment variable LEGACY_LODASH must be set to 'true' if using Lodash 3.x","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use require() or configure Babel with the preset name string.","message":"The preset is CommonJS only; direct ES module imports will fail","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install babel-preset-focus --save-dev' and ensure .babelrc uses the full name 'babel-preset-focus'.","cause":"Package not installed or Babel cannot resolve the preset name.","error":"Cannot find module 'babel-preset-focus'"},{"fix":"Upgrade to Babel 7 or downgrade preset to v0.7.0.","cause":"This preset targets Babel 7+, but older Babel is installed.","error":"Error: Requires Babel 7.x but was loaded with Babel 6.x"},{"fix":"Install @babel/polyfill or use @babel/plugin-transform-runtime with @babel/runtime.","cause":"The preset does not include a polyfill; regeneratorRuntime is needed for async/await.","error":"ReferenceError: regeneratorRuntime is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}