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.
npm install react-transform-hmrVerified import paths — ran on the pinned version, not inferred.
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.
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).
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.
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.
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.
If you're using `react-transform-hmr`, ensure React Hot Loader is not installed or enabled in your project's build configuration.
Configure `react-transform-hmr` directly via `babel-loader` options in your `webpack.config.js` for React Native, rather than using a separate `.babelrc` file.