Babel JSX Utils

1.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Cannot resolve attribute 'src': no scope information ↓

cause The attribute value references a variable or expression that is not statically analyzable in the current Babel scope.

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.

error TypeError: (0 , _babelJsxUtils.getAttributeValues) is not a function ↓

cause CommonJS require style used instead of named import, potentially due to mixing CJS and ESM.

fix

Use correct named import: import { getAttributeValues } from 'babel-jsx-utils'

error Module '"babel-jsx-utils"' has no exported member 'getAttributeValues' ↓

cause Attempting to import a non-existent symbol or using default import when only named exports exist.

fix

Check import statement: use import { getAttributeValues } from 'babel-jsx-utils'

Warnings

gotcha getAttributeValues cannot resolve function calls or props passed from a parent component; it only evaluates local variables and simple expressions. ↓

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.

gotcha Spread attributes are not resolved individually; the entire spread is skipped. ↓

fix Do not rely on spread attributes being included in the result; handle them separately.

gotcha The return type of getAttributeValue includes `true` for boolean attributes without a value (e.g., <Image eager />), which may conflict with other value types. ↓

fix Check for `true` explicitly or use TypeScript to handle the union type `T | true`.

Install

npm install babel-jsx-utils

yarn add babel-jsx-utils

pnpm add babel-jsx-utils

Imports

getAttributeValues

wrong

const { getAttributeValues } = require('babel-jsx-utils')

correct

import { getAttributeValues } from 'babel-jsx-utils'

ESM native; CJS require works but may cause issues in some tooling

getAttributeValue

wrong

import getAttributeValue from 'babel-jsx-utils'

correct

import { getAttributeValue } from 'babel-jsx-utils'

This is a named export, not a default export

CoreNodePath
```
import type { CoreNodePath } from 'babel-jsx-utils'
```
TypeScript type export; only needed if using TypeScript for type annotations

Quickstart

Shows how to parse JSX, traverse AST, and resolve attribute values using getAttributeValues.

import { parse, traverse } from '@babel/core';
import { getAttributeValues } from 'babel-jsx-utils';

const code = `function Logo() { const src = 'trex.png'; return <img src={src} alt="T-Rex" />; }`;
const ast = parse(code, { filename: 'test.jsx', presets: ['@babel/preset-react'] });
traverse(ast, {
  JSXOpeningElement(path) {
    const values = getAttributeValues(path);
    console.log(values); // { src: 'trex.png', alt: 'T-Rex' }
  }
});