{"id":19007,"library":"babel-jsx-utils","title":"Babel JSX Utils","description":"babel-jsx-utils (v1.1.0) is a utility library for resolving JSX attribute values at compile time using Babel. It statically evaluates attribute expressions in the local scope, handling variables, literals, and simple expressions but not function calls or props passed from parent components. This is primarily used in custom Babel plugins for static analysis or code transformations. Released infrequently, it is a lightweight alternative to more complex AST utilities. Key differentiator: focuses specifically on JSX attribute resolution with a simple API (getAttributeValues, getAttributeValue) and built-in error handling for unresolvable attributes.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install babel-jsx-utils","lang":"bash","label":"npm"},{"cmd":"yarn add babel-jsx-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-jsx-utils","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM native; CJS require works but may cause issues in some tooling","wrong":"const { getAttributeValues } = require('babel-jsx-utils')","symbol":"getAttributeValues","correct":"import { getAttributeValues } from 'babel-jsx-utils'"},{"note":"This is a named export, not a default export","wrong":"import getAttributeValue from 'babel-jsx-utils'","symbol":"getAttributeValue","correct":"import { getAttributeValue } from 'babel-jsx-utils'"},{"note":"TypeScript type export; only needed if using TypeScript for type annotations","wrong":"","symbol":"CoreNodePath","correct":"import type { CoreNodePath } from 'babel-jsx-utils'"}],"quickstart":{"code":"import { parse, traverse } from '@babel/core';\nimport { getAttributeValues } from 'babel-jsx-utils';\n\nconst code = `function Logo() { const src = 'trex.png'; return <img src={src} alt=\"T-Rex\" />; }`;\nconst ast = parse(code, { filename: 'test.jsx', presets: ['@babel/preset-react'] });\ntraverse(ast, {\n  JSXOpeningElement(path) {\n    const values = getAttributeValues(path);\n    console.log(values); // { src: 'trex.png', alt: 'T-Rex' }\n  }\n});","lang":"typescript","description":"Shows how to parse JSX, traverse AST, and resolve attribute values using getAttributeValues."},"warnings":[{"fix":"Ensure attribute values are local literals, variables, or simple expressions (e.g., a + b). For dynamic props, consider runtime evaluation or a different approach.","message":"getAttributeValues cannot resolve function calls or props passed from a parent component; it only evaluates local variables and simple expressions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Do not rely on spread attributes being included in the result; handle them separately.","message":"Spread attributes are not resolved individually; the entire spread is skipped.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Check for `true` explicitly or use TypeScript to handle the union type `T | true`.","message":"The return type of getAttributeValue includes `true` for boolean attributes without a value (e.g., <Image eager />), which may conflict with other value types.","severity":"gotcha","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":"Ensure the variable is defined in the same function scope and is a literal or simple expression. Alternatively, pass a custom onError callback to handle unresolved attributes.","cause":"The attribute value references a variable or expression that is not statically analyzable in the current Babel scope.","error":"Cannot resolve attribute 'src': no scope information"},{"fix":"Use correct named import: import { getAttributeValues } from 'babel-jsx-utils'","cause":"CommonJS require style used instead of named import, potentially due to mixing CJS and ESM.","error":"TypeError: (0 , _babelJsxUtils.getAttributeValues) is not a function"},{"fix":"Check import statement: use import { getAttributeValues } from 'babel-jsx-utils'","cause":"Attempting to import a non-existent symbol or using default import when only named exports exist.","error":"Module '\"babel-jsx-utils\"' has no exported member 'getAttributeValues'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}