{"id":19198,"library":"babel-plugin-transform-hook-names","title":"babel-plugin-transform-hook-names","description":"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.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/preactjs/babel-plugin-transform-hook-names","tags":["javascript","babel","hook","preact","devtools"],"install":[{"cmd":"npm install babel-plugin-transform-hook-names","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-hook-names","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-hook-names","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for Babel plugin to function","package":"@babel/core","optional":false}],"imports":[{"note":"Use full npm package name in babel config; not just the suffix","wrong":"plugins: ['transform-hook-names']","symbol":"default import (plugin)","correct":"module.exports = { plugins: ['babel-plugin-transform-hook-names'] }"},{"note":"addHookName is exported by preact/devtools, not by this plugin","wrong":"import { addHookName } from 'babel-plugin-transform-hook-names'","symbol":"addHookName","correct":"import { addHookName } from 'preact/devtools'"},{"note":"Plugin is CommonJS; no default export","wrong":"const plugin = require('babel-plugin-transform-hook-names').default","symbol":"Plugin programmatic use","correct":"const plugin = require('babel-plugin-transform-hook-names')"}],"quickstart":{"code":"// Install: npm install --save-dev babel-plugin-transform-hook-names\n// Add to .babelrc or babel.config.js:\n{\n  \"plugins\": [\"babel-plugin-transform-hook-names\"]\n}\n\n// Example input:\nimport { useState, useReducer, useRef, useMemo } from 'preact/hooks';\nfunction Foo() {\n  const [text, setText] = useState('hello');\n  const [counter, increment] = useReducer(c => c + 1, 0);\n  const rootElement = useRef();\n  const memo = useMemo(() => text.toUpperCase(), [text]);\n}\n// Output (in bundle):\n// import { addHookName } from 'preact/devtools';\n// ... const [text, setText] = addHookName(useState('hello'), 'text');","lang":"javascript","description":"Installs the Babel plugin and shows how it transforms hook calls to include names for Preact DevTools."},"warnings":[{"fix":"Ensure you are using preact/hooks or preact/compat; this plugin is for Preact DevTools only","message":"Plugin only works with Preact hooks; does not support React hooks unless using preact/compat","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade @babel/core to >= 7.12.10","message":"Requires Babel >= 7.12; will fail silently or throw on older versions","severity":"breaking","affected_versions":"<7.12"},{"fix":"Ensure preact/devtools is installed and imports/requires work in your build environment","message":"Plugin does not automatically import addHookName; you must have preact/devtools available at runtime","severity":"gotcha","affected_versions":"all"},{"fix":"","message":"No known deprecations; maintainers have not released updates since v1.0.2 (latest as of 2023)","severity":"deprecated","affected_versions":"all"},{"fix":"Use static variable assignments for hooks (e.g., const [foo, setFoo] = useState(...)) for the plugin to infer names","message":"The plugin may not work if the variable name is not statically analyzable (e.g., dynamic destructuring)","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev babel-plugin-transform-hook-names","cause":"Plugin not installed or not saved as devDependency","error":"Error: Cannot find module 'babel-plugin-transform-hook-names'"},{"fix":"Update @babel/core to version >= 7.12.10","cause":"Babel version < 7.12","error":"SyntaxError: Unexpected token: plugin 'babel-plugin-transform-hook-names' is missing"},{"fix":"Verify plugin is in babel config, and preact/devtools is imported at runtime","cause":"addHookName from preact/devtools not being called (e.g., plugin not transforming)","error":"Hook names not appearing in Preact DevTools"},{"fix":"Ensure preact is installed and version includes addHookName (preact >= 10.5)","cause":"preact/devtools not installed or addHookName not exported in that version","error":"TypeError: addHookName is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}