babel-plugin-autobind-class-methods

5.0.1 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'babel-plugin-autobind-class-methods' ↓

cause Plugin not installed or missing from node_modules.

fix

npm install babel-plugin-autobind-class-methods --save-dev

error TypeError: Cannot read property 'bind' of undefined ↓

cause Plugin applied to a class method that is not a function, possibly due to incorrect Babel configuration.

fix

Ensure the plugin is listed in the 'plugins' array and not 'presets'.

error This plugin doesn't work with Babel 7. Upgrade to @babel/plugin-proposal-class-properties. ↓

cause Plugin is designed for Babel 6; Babel 7 changed plugin API.

fix

Use @babel/plugin-proposal-class-properties instead or stick with Babel 6.

error Warning: Autobind plugin may conflict with React Hot Loader 3. ↓

cause Incompatible versions or misconfiguration with hot reloading.

fix

Ensure hot loader is correctly set up; see React Hot Loader 3-beta docs.

error ESLint error: 'this' is not allowed in class method before super() ↓

cause Plugin might bind methods too early in the constructor, causing linting errors.

fix

Disable the ESLint rule or adjust class constructor order.

Warnings

deprecated Using class property arrow functions (e.g., greet = () => {}) is now preferred over autobinding plugins in modern React/JavaScript. ↓

fix Use native class property syntax with arrow functions or explicitly bind in the constructor.

gotcha Plugin only works with Babel 6.x; not compatible with Babel 7+ without migration. ↓

fix Check Babel version; for Babel 7 use @babel/plugin-proposal-class-properties or similar.

gotcha Methods defined with arrow function syntax (e.g., method = () => {}) are NOT bound by the plugin, potentially causing double binding issues. ↓

fix Do not mix autobind with arrow property methods; use one approach consistently.

gotcha The plugin transforms all methods, including lifecycle methods like render() in React, which may have performance implications. ↓

fix Consider using selective binding via decorators or manual binding for performance-critical methods.

deprecated Package is in maintenance mode with no recent updates; alternative plugins like babel-plugin-transform-class-properties are recommended. ↓

fix Migrate to modern class property syntax or use @babel/plugin-proposal-class-properties.

Install

npm install babel-plugin-autobind-class-methods

yarn add babel-plugin-autobind-class-methods

pnpm add babel-plugin-autobind-class-methods

Imports

plugin

wrong

// Wrong: using 'babel-plugin-autobind-class-methods' instead of 'autobind-class-methods' in plugins array

correct

// .babelrc
{ "plugins": ["autobind-class-methods"] }

The plugin name in .babelrc should be the shorthand 'autobind-class-methods', not the full package name.

N/A - Plugin used via Babel config, not import

wrong

import autobind from 'babel-plugin-autobind-class-methods' (no default export)

correct

require('@babel/core').transform(code, { plugins: [require('babel-plugin-autobind-class-methods')] })

This is a Babel plugin, not a runtime module. It cannot be imported in application code.

No import needed

wrong

import { autobind } from 'babel-plugin-autobind-class-methods' (wrong; no runtime export)

correct

// Not a runtime dependency; add to devDependencies and configure in .babelrc or babel.config.js

Do not attempt to import this plugin in your source files. It only works as a Babel transform.

Quickstart

Install plugin, add to Babel config, and see autobinding in action with a class method callback.

// Install
npm install babel-plugin-autobind-class-methods --save-dev

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["autobind-class-methods"]
}

// Your code
class Example {
  constructor() {
    this.greeting = 'Hello';
  }
  greet() {
    console.log(this.greeting);
  }
  render() {
    setTimeout(this.greet, 0); // 'this' is autobound, so it logs 'Hello'
  }
}
new Example().render();