{"id":11892,"library":"react-transform-hmr","title":"React Transform HMR","description":"react-transform-hmr is a Babel transform designed to enable hot module reloading (HMR) for React components, primarily leveraging Webpack's Hot Module Replacement API. Currently at version 1.0.4, its development has seen minor updates, mainly around `react-proxy` bumps. It is explicitly presented as \"highly experimental tech\" and \"not long term,\" intended more for prototyping future React developer experiences than for stable project use. The package's explicit goal is to be superseded by less hacky, built-in React features. It requires `babel-plugin-react-transform` as a prerequisite and operates by modifying React class components at compile-time to support HMR. A significant limitation is its inability to work with stateless functional components introduced in React 0.14 and later. Users are strongly cautioned against relying on it for production or long-term projects, as the underlying technologies could drastically change or be deprecated. Its release cadence was active in late 2015, but has since ceased, indicating an abandoned status in favor of more stable HMR solutions like React Refresh.","status":"abandoned","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/gaearon/react-transform-hmr","tags":["javascript","react-transform","react","reactjs","webpack","hmr","live","edit","hot"],"install":[{"cmd":"npm install react-transform-hmr","lang":"bash","label":"npm"},{"cmd":"yarn add react-transform-hmr","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-transform-hmr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required Babel plugin for this transform to operate.","package":"babel-plugin-react-transform","optional":false},{"reason":"Internal dependency for React class proxying during HMR.","package":"react-proxy","optional":false}],"imports":[{"note":"The package itself is a Babel transform. Its 'import' is via configuration in your `.babelrc` or Babel loader options, where its name is provided as a string identifier within the `babel-plugin-react-transform` configuration array.","wrong":"import ReactTransformHMR from 'react-transform-hmr';\nconst ReactTransformHMR = require('react-transform-hmr');","symbol":"react-transform-hmr","correct":"This is a Babel transform configured in .babelrc, not directly imported into JS/TS files. It is referenced as a string within the 'transforms' array."}],"quickstart":{"code":"{  \"presets\": [\"es2015\", \"stage-0\"],\n  \"env\": {\n    \"development\": {\n      \"plugins\": [[\"babel-plugin-react-transform\", {\n        \"transforms\": [{\n          \"transform\": \"react-transform-hmr\",\n          \"imports\": [\"react\"],\n          \"locals\": [\"module\"]\n        }]\n      }]]\n    }\n  }\n}","lang":"javascript","description":"This configuration snippet for `.babelrc` shows how to enable `react-transform-hmr` specifically for the development environment, ensuring it's not bundled in production builds. It sets up the `react-transform` plugin with `react-transform-hmr` as one of its transforms, specifying `react` as an import and `module` as a local for HMR."},"warnings":[{"fix":"Wrap your `react-transform` configuration within an `env.development` block in `.babelrc` and ensure `process.env.NODE_ENV` is correctly set during your build process (e.g., `NODE_ENV=development` for dev builds).","message":"Starting from v1.0.0, the transform no longer acts as a no-op in production environments. It is now your responsibility to ensure it's only enabled in development.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"For modern React projects, consider using more stable and official hot reloading solutions like React Refresh (via `@pmmmwh/react-refresh-webpack-plugin`) which is actively maintained and built into tools like Create React App.","message":"This technology is explicitly labeled as 'highly experimental' and 'not long term', intended for prototyping rather than stable projects. The goal is to eventually replace it with less hacky, built-in React features.","severity":"deprecated","affected_versions":">=0.1.6"},{"fix":"This transform is primarily for React class components. If you heavily use stateless functional components, this package will not provide HMR for them. Alternative HMR solutions are required for full coverage.","message":"This transform does not currently work for stateless functional components, which were introduced in React 0.14.","severity":"gotcha","affected_versions":">=0.1.6"},{"fix":"For React Native, it is recommended to configure `react-transform` directly with `babel-loader` options in your Webpack configuration instead of using a `.babelrc` file, as shown in the package's React Native documentation.","message":"When using with React Native, configuring `react-transform-hmr` via `.babelrc` can lead to issues such as `Uncaught SyntaxError: Unexpected reserved word` or changes not being picked up by the packager's aggressive caching.","severity":"gotcha","affected_versions":">=0.1.6"},{"fix":"If you're using `react-transform-hmr`, ensure React Hot Loader is not installed or enabled in your project's build configuration.","message":"You should not use `react-transform-hmr` concurrently with React Hot Loader, as it's not needed and can cause conflicts.","severity":"gotcha","affected_versions":">=0.1.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Configure `react-transform-hmr` directly via `babel-loader` options in your `webpack.config.js` for React Native, rather than using a separate `.babelrc` file.","cause":"Using `.babelrc` to configure `react-transform-hmr` in a React Native project.","error":"Uncaught SyntaxError: Unexpected reserved word"}],"ecosystem":"npm"}