{"id":24966,"library":"babel-preset-dlight-client","title":"babel-preset-dlight-client","description":"Babel preset for transpiling DLight.js reactive UI components in client-side code. Current version 0.9.20. Designed specifically for the DLight.js reactive framework, this Babel preset transforms JSX-like syntax and reactive expressions into JavaScript that browsers can execute. It's part of the DLight ecosystem and eliminates the need for manual configuration of Babel plugins when using DLight.js in the browser. Differentiators: purpose-built for DLight.js, handles client-specific transformations, and integrates seamlessly with the DLight toolchain. Release cadence: minor updates as DLight.js evolves.","status":"active","version":"0.9.20","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","dlight.js","babel-preset","typescript"],"install":[{"cmd":"npm install babel-preset-dlight-client","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-dlight-client","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-dlight-client","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Babel transformation","package":"@babel/core","optional":false},{"reason":"Runtime library for DLight reactive components","package":"dlight","optional":false}],"imports":[{"note":"Presets are CommonJS modules; use require or module.exports. Not ESM compatible.","wrong":"import preset from 'babel-preset-dlight-client'","symbol":"default","correct":"module.exports = function(api, opts) { return { presets: ['babel-preset-dlight-client'] } }"},{"note":"In Babel configuration, reference the preset by string name. No need to import.","wrong":"import { preset } from 'babel-preset-dlight-client'","symbol":"babel-preset-dlight-client","correct":"// .babelrc\n{ \"presets\": [\"babel-preset-dlight-client\"] }"},{"note":"Options must be in an array with the preset name. Used in Babel config JSON.","wrong":"presets: [\"babel-preset-dlight-client\", { mode: 'client' }]","symbol":"options","correct":"{\n  \"presets\": [\n    [\"babel-preset-dlight-client\", {\n      \"mode\": \"client\"\n    }]\n  ]\n}"}],"quickstart":{"code":"// Install: npm install babel-preset-dlight-client @babel/core dlight\n\n// .babelrc\n{\n  \"presets\": [\"babel-preset-dlight-client\"]\n}\n\n// src/component.js\nimport { view, render } from 'dlight'\n\nconst MyComponent = view(() => {\n  const count = 0\n  return div(`Count: ${count}`)\n})\n\nrender(MyComponent, document.getElementById('app'))","lang":"javascript","description":"Shows minimal Babel configuration and a simple DLight component to get started."},"warnings":[{"fix":"Use dedicated presets for server or universal environments if needed.","message":"This preset is for CLIENT-SIDE code only. Do not use it in server-side rendering (SSR) without appropriate adjustments.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to latest 0.9.x and adjust for any API changes in DLight.","message":"Version 0.9.x may contain breaking changes; check changelog when upgrading from older versions.","severity":"deprecated","affected_versions":"<0.9.0"},{"fix":"Ensure @babel/core is installed and version is compatible.","message":"Preset requires a specific version of @babel/core (≥7.0.0). Using incompatible versions may cause errors.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use string reference in presets array: \"babel-preset-dlight-client\" (no import).","cause":"This preset is a function, but may be imported incorrectly as an object in Babel config.","error":"Error: Plugin/Preset files are not allowed to export objects, only functions."},{"fix":"Use CommonJS in Babel config (module.exports) or ensure ESM support.","cause":"Using ES module syntax to import the preset in Babel config.","error":"ReferenceError: require is not defined"},{"fix":"Run npm install babel-preset-dlight-client and check package.json spelling.","cause":"Package not installed or misnamed in configuration.","error":"Error: Cannot find module 'babel-preset-dlight-client'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}