babel-plugin-transform-hook-names

1.0.2 verified Sat Apr 25 auth: no javascript

Babel plugin (v1.0.2) that automatically infers and attaches names to Preact hooks for improved debugging in Preact DevTools. It transforms hook calls like useState, useReducer, useRef, and useMemo by wrapping them with addHookName, using the variable name as the hook name. Requires @babel/core >= 7.12. Lightweight and specific to Preact; no alternative plugins exist for this exact purpose. Released under MIT.

Common errors

error Error: Cannot find module 'babel-plugin-transform-hook-names' ↓

cause Plugin not installed or not saved as devDependency

fix

npm install --save-dev babel-plugin-transform-hook-names

error SyntaxError: Unexpected token: plugin 'babel-plugin-transform-hook-names' is missing ↓

cause Babel version < 7.12

fix

Update @babel/core to version >= 7.12.10

error Hook names not appearing in Preact DevTools ↓

cause addHookName from preact/devtools not being called (e.g., plugin not transforming)

fix

Verify plugin is in babel config, and preact/devtools is imported at runtime

error TypeError: addHookName is not a function ↓

cause preact/devtools not installed or addHookName not exported in that version

fix

Ensure preact is installed and version includes addHookName (preact >= 10.5)

Warnings

gotcha Plugin only works with Preact hooks; does not support React hooks unless using preact/compat ↓

fix Ensure you are using preact/hooks or preact/compat; this plugin is for Preact DevTools only

breaking Requires Babel >= 7.12; will fail silently or throw on older versions ↓

fix Upgrade @babel/core to >= 7.12.10

gotcha Plugin does not automatically import addHookName; you must have preact/devtools available at runtime ↓

fix Ensure preact/devtools is installed and imports/requires work in your build environment

deprecated No known deprecations; maintainers have not released updates since v1.0.2 (latest as of 2023)

gotcha The plugin may not work if the variable name is not statically analyzable (e.g., dynamic destructuring) ↓

fix Use static variable assignments for hooks (e.g., const [foo, setFoo] = useState(...)) for the plugin to infer names

Install

npm install babel-plugin-transform-hook-names

yarn add babel-plugin-transform-hook-names

pnpm add babel-plugin-transform-hook-names

Imports

default import (plugin)

wrong

plugins: ['transform-hook-names']

correct

module.exports = { plugins: ['babel-plugin-transform-hook-names'] }

Use full npm package name in babel config; not just the suffix

addHookName

wrong

import { addHookName } from 'babel-plugin-transform-hook-names'

correct

import { addHookName } from 'preact/devtools'

addHookName is exported by preact/devtools, not by this plugin

Plugin programmatic use

wrong

const plugin = require('babel-plugin-transform-hook-names').default

correct

const plugin = require('babel-plugin-transform-hook-names')

Plugin is CommonJS; no default export

Quickstart

Installs the Babel plugin and shows how it transforms hook calls to include names for Preact DevTools.

// Install: npm install --save-dev babel-plugin-transform-hook-names
// Add to .babelrc or babel.config.js:
{
  "plugins": ["babel-plugin-transform-hook-names"]
}

// Example input:
import { useState, useReducer, useRef, useMemo } from 'preact/hooks';
function Foo() {
  const [text, setText] = useState('hello');
  const [counter, increment] = useReducer(c => c + 1, 0);
  const rootElement = useRef();
  const memo = useMemo(() => text.toUpperCase(), [text]);
}
// Output (in bundle):
// import { addHookName } from 'preact/devtools';
// ... const [text, setText] = addHookName(useState('hello'), 'text');