{"id":19140,"library":"babel-plugin-react-transform","title":"babel-plugin-react-transform","description":"This Babel plugin wraps React components with arbitrary transforms, enabling instrumentation like hot reloading, error catching, and render logging. Current stable version is 3.0.0 (Babel 6 support). It was deprecated in favor of React Hot Loader 3 and should not be used in new projects. The plugin is part of a highly experimental ecosystem; its API changed between v1.x and v2.x, with the `target` option renamed to `transform` and the config moved under a `transforms` property. Alternatives include React Hot Loader 3 and newer tools like Fast Refresh.","status":"deprecated","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/gaearon/babel-plugin-react-transform","tags":["javascript","babel-plugin","react-transform","instrumentation","dx","react","reactjs","components"],"install":[{"cmd":"npm install babel-plugin-react-transform","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-transform","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-transform","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Babel plugins are typically used via .babelrc or babel.config.js, not imported directly. The 'require' form works in Node but is not the expected usage.","wrong":"const reactTransform = require('babel-plugin-react-transform')","symbol":"default","correct":"import reactTransform from 'babel-plugin-react-transform'"},{"note":"The old config format (v1.x) used 'extra' and 'target'. v2+ uses 'transforms' array and 'transform' property inside the plugin options.","wrong":"{\n  \"plugins\": [\"react-transform\"],\n  \"extra\": {\n    \"react-transform\": [{\n      \"target\": \"react-transform-hmr\",\n      \"imports\": [\"react\"]\n    }]\n  }\n}","symbol":"plugin (as Babel config)","correct":"{\n  \"plugins\": [\"react-transform\"],\n  \"env\": {\n    \"development\": {\n      \"plugins\": [[\"react-transform\", {\n        \"transforms\": [{\n          \"transform\": \"react-transform-hmr\",\n          \"imports\": [\"react\"]\n        }]\n      }]]\n    }\n  }\n}"},{"note":"Transform modules are CommonJS compatible but ESM import works if they export a default. Most transforms export a function or object and can be imported.","wrong":"const hmrTransform = require('react-transform-hmr')","symbol":"transform module (e.g., react-transform-hmr)","correct":"import hmrTransform from 'react-transform-hmr'"}],"quickstart":{"code":"// First, install the plugin and a transform:\n// npm install --save-dev babel-plugin-react-transform react-transform-hmr\n\n// Then, configure Babel (e.g., in .babelrc or babel.config.js):\n// For Babel 6, add the plugin under 'env.development' to only apply in dev:\n{\n  \"presets\": [\"react\"],\n  \"env\": {\n    \"development\": {\n      \"plugins\": [[\"react-transform\", {\n        \"transforms\": [{\n          \"transform\": \"react-transform-hmr\",\n          \"imports\": [\"react-dom\"]\n        }]\n      }]]\n    }\n  }\n}\n\n// Note: This plugin is deprecated. Prefer React Hot Loader 3 or Fast Refresh.","lang":"javascript","description":"Shows how to install and configure babel-plugin-react-transform with a transform, including Babel 6 env-specific config."},"warnings":[{"fix":"Migrate to React Fast Refresh (built into Create React App, Next.js, etc.) or react-hot-loader@3+.","message":"This project is deprecated. React Hot Loader 3 is the replacement, and React Fast Refresh is the modern solution.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Update your .babelrc from the v1 format: remove 'extra', add plugin options directly with 'transforms' array and use 'transform' instead of 'target'.","message":"In v2.0.0, the config format changed: 'target' was renamed to 'transform', and the array of transforms is now under a 'transforms' property on the plugin options object instead of 'extra'.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If your components are not being wrapped, ensure they extend a recognized superclass or are created via factory methods, or configure 'superClasses'/'factoryMethods' in plugin options.","message":"v2.0.1 fixed false positives: only components with a 'render' method AND subclassing one of 'options.superClasses' (default: React.Component) or using 'options.factoryMethods' (default: React.createClass) are instrumented.","severity":"breaking","affected_versions":">=2.0.1"},{"fix":"Avoid using this plugin in production. For hot reloading, use React Hot Loader 3 or Fast Refresh. For error catching, prefer React error boundaries.","message":"The plugin is highly experimental and may be incompatible with future React or Babel versions. It has known issues with circular imports and Array#find polyfills in older environments.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'babel-plugin-transform-runtime' to your Babel plugins, or import 'babel-polyfill' in your entry file.","cause":"Babel 6 does not include runtime polyfills by default; you need to configure the 'transform-runtime' or 'babel-polyfill' plugin.","error":"ReferenceError: regeneratorRuntime is not defined"},{"fix":"Run 'npm install --save-dev react-transform-hmr' (or the specific transform you need).","cause":"The required transform package is not installed or not in node_modules.","error":"Module not found: Can't resolve 'react-transform-hmr'"},{"fix":"Update to babel-plugin-react-transform@2.0.2 or later, or ensure a proper polyfill for Array.prototype.find.","cause":"An older polyfill (like bad version of lodash) breaks Array#find, which the plugin uses internally in v2.0.2.","error":"Uncaught TypeError: Cannot read property 'find' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}