{"id":19027,"library":"babel-plugin-autobind-class-methods","title":"babel-plugin-autobind-class-methods","description":"A Babel plugin that automatically binds all class methods to the instance, ensuring `this` context is preserved in callbacks. Version 5.0.1 supports hot reloading with React Hot Loader 3-beta. Unlike manual binding or property arrow functions, this plugin transforms code at build time with zero runtime overhead. It works with ES2015+ class syntax and is commonly used in React projects to avoid repetitive .bind(this) calls. The plugin is stable but not actively maintained; alternative patterns like class property arrow functions are preferred in modern codebases.","status":"maintenance","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/chris-lock/babel-plugin-autobind-class-methods","tags":["javascript","Babel","class","autobind","this","bind","arrow","react","method"],"install":[{"cmd":"npm install babel-plugin-autobind-class-methods","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-autobind-class-methods","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-autobind-class-methods","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency; the plugin is a Babel transform.","package":"@babel/core","optional":false}],"imports":[{"note":"The plugin name in .babelrc should be the shorthand 'autobind-class-methods', not the full package name.","wrong":"// Wrong: using 'babel-plugin-autobind-class-methods' instead of 'autobind-class-methods' in plugins array","symbol":"plugin","correct":"// .babelrc\n{ \"plugins\": [\"autobind-class-methods\"] }"},{"note":"This is a Babel plugin, not a runtime module. It cannot be imported in application code.","wrong":"import autobind from 'babel-plugin-autobind-class-methods' (no default export)","symbol":"N/A - Plugin used via Babel config, not import","correct":"require('@babel/core').transform(code, { plugins: [require('babel-plugin-autobind-class-methods')] })"},{"note":"Do not attempt to import this plugin in your source files. It only works as a Babel transform.","wrong":"import { autobind } from 'babel-plugin-autobind-class-methods' (wrong; no runtime export)","symbol":"No import needed","correct":"// Not a runtime dependency; add to devDependencies and configure in .babelrc or babel.config.js"}],"quickstart":{"code":"// Install\nnpm install babel-plugin-autobind-class-methods --save-dev\n\n// .babelrc\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"],\n  \"plugins\": [\"autobind-class-methods\"]\n}\n\n// Your code\nclass Example {\n  constructor() {\n    this.greeting = 'Hello';\n  }\n  greet() {\n    console.log(this.greeting);\n  }\n  render() {\n    setTimeout(this.greet, 0); // 'this' is autobound, so it logs 'Hello'\n  }\n}\nnew Example().render();","lang":"javascript","description":"Install plugin, add to Babel config, and see autobinding in action with a class method callback."},"warnings":[{"fix":"Use native class property syntax with arrow functions or explicitly bind in the constructor.","message":"Using class property arrow functions (e.g., greet = () => {}) is now preferred over autobinding plugins in modern React/JavaScript.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"Check Babel version; for Babel 7 use @babel/plugin-proposal-class-properties or similar.","message":"Plugin only works with Babel 6.x; not compatible with Babel 7+ without migration.","severity":"gotcha","affected_versions":">=5.0.1"},{"fix":"Do not mix autobind with arrow property methods; use one approach consistently.","message":"Methods defined with arrow function syntax (e.g., method = () => {}) are NOT bound by the plugin, potentially causing double binding issues.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Consider using selective binding via decorators or manual binding for performance-critical methods.","message":"The plugin transforms all methods, including lifecycle methods like render() in React, which may have performance implications.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Migrate to modern class property syntax or use @babel/plugin-proposal-class-properties.","message":"Package is in maintenance mode with no recent updates; alternative plugins like babel-plugin-transform-class-properties are recommended.","severity":"deprecated","affected_versions":">=5.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install babel-plugin-autobind-class-methods --save-dev","cause":"Plugin not installed or missing from node_modules.","error":"Error: Cannot find module 'babel-plugin-autobind-class-methods'"},{"fix":"Ensure the plugin is listed in the 'plugins' array and not 'presets'.","cause":"Plugin applied to a class method that is not a function, possibly due to incorrect Babel configuration.","error":"TypeError: Cannot read property 'bind' of undefined"},{"fix":"Use @babel/plugin-proposal-class-properties instead or stick with Babel 6.","cause":"Plugin is designed for Babel 6; Babel 7 changed plugin API.","error":"This plugin doesn't work with Babel 7. Upgrade to @babel/plugin-proposal-class-properties."},{"fix":"Ensure hot loader is correctly set up; see React Hot Loader 3-beta docs.","cause":"Incompatible versions or misconfiguration with hot reloading.","error":"Warning: Autobind plugin may conflict with React Hot Loader 3."},{"fix":"Disable the ESLint rule or adjust class constructor order.","cause":"Plugin might bind methods too early in the constructor, causing linting errors.","error":"ESLint error: 'this' is not allowed in class method before super()"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}