Registry / babel-plugin-autobind-class-methods

babel-plugin-autobind-class-methods

library5.0.1jsnpmunverified

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.

npm install babel-plugin-autobind-class-methods

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-AUTOB

babel-plugin-autobind-class-methods

javascriptv5.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

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

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

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

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

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

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

No import needed

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

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

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

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();

Debug

Known issues

deprecatedUsing 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.

affects: >=0.0.1

gotchaPlugin 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.

affects: >=5.0.1

gotchaMethods 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.

affects: >=0.0.1

gotchaThe 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.

affects: >=0.0.1

deprecatedPackage 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.

affects: >=5.0.1

Errors

Common errors & fixes

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

Plugin not installed or missing from node_modules.

fix

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

TypeError: Cannot read property 'bind' of undefined

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'.

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

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

fix

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

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

Incompatible versions or misconfiguration with hot reloading.

fix

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

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

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

fix

Disable the ESLint rule or adjust class constructor order.

Upgrade

Version history

5.0.1latest on npm

Audit

Dependencies

@babel/corerequiredRequired as a peer dependency; the plugin is a Babel transform.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/chris-lock/babel-plugin-autobind-class-methods ↗

packagehttps://www.npmjs.com/package/babel-plugin-autobind-class-methods ↗