React Transform HMR

1.0.4 · abandoned · verified Sun Apr 19

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.

Common errors

```
Uncaught SyntaxError: Unexpected reserved word
```
cause Using `.babelrc` to configure `react-transform-hmr` in a React Native project.

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.

Warnings

breaking 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.
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).
deprecated 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.
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.
gotcha This transform does not currently work for stateless functional components, which were introduced in React 0.14.
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.
gotcha 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.
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.
gotcha You should not use `react-transform-hmr` concurrently with React Hot Loader, as it's not needed and can cause conflicts.
Fix: If you're using `react-transform-hmr`, ensure React Hot Loader is not installed or enabled in your project's build configuration.

Install

npm install react-transform-hmr npm
yarn add react-transform-hmr yarn
pnpm add react-transform-hmr pnpm

Imports

react-transform-hmr
wrong:
```
import ReactTransformHMR from 'react-transform-hmr';
const ReactTransformHMR = require('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.
```
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.

Quickstart

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.

{  "presets": ["es2015", "stage-0"],
  "env": {
    "development": {
      "plugins": [["babel-plugin-react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          "imports": ["react"],
          "locals": ["module"]
        }]
      }]]
    }
  }
}

view raw JSON →