{"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,"search_vec":"'3':42,87 '3.0.0':29 '6':31 'altern':82 'api':61 'arbitrari':13 'babel':2,7,30,96 'babel-plugin':95 'babel-plugin-react-transform':1 'catch':21 'chang':62 'compon':11,105 'config':76 'current':25 'deprec':35 'dx':102 'ecosystem':59 'enabl':15 'error':20 'experiment':58 'fast':92 'favor':37 'high':57 'hot':18,40,85 'includ':83 'instrument':16,101 'javascript':94 'like':17,91 'loader':41,86 'log':24 'move':77 'new':49 'newer':89 'option':70 'part':54 'plugin':3,8,52,97 'project':50 'properti':81 'react':4,10,39,84,99,103 'react-transform':98 'reactj':104 'refresh':93 'reload':19 'renam':71 'render':23 'stabl':26 'support':32 'target':69 'tool':90 'transform':5,14,73,80,100 'use':47 'v1.x':64 'v2.x':66 'version':27 'wrap':9","created_at":"2026-04-25T11:16:15.783312+00:00","updated_at":"2026-04-25T11:16:15.783312+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/gaearon/babel-plugin-react-transform","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/babel-plugin-react-transform","openapi_spec":null,"status_page":null,"smithery":null,"categories":["llm-agents","ai-ml"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}