babel-preset-react-hmre

1.1.1 verified Sat Apr 25 auth: no javascript deprecated

Babel preset for React Hot Module Replacement (HMR) and error catching using react-transform-hmr and react-transform-catch-errors. Version 1.1.1 is the latest stable release; originally designed for Babel 6 and is now deprecated due to lack of maintenance and incompatibility with Babel 7+ and modern React. Use this only for older projects, as alternatives like @pmmmwh/react-refresh-webpack-plugin provide better HMR support.

Common errors

error Error: Module 'babel-preset-react-hmre' is not found ↓

cause Missing dependency or using with Babel 7+ which changed preset resolution.

fix

Install the package: npm install --save-dev babel-preset-react-hmre. Ensure Babel 6 is used, or switch to a modern alternative.

error Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded ↓

cause Conflicting React versions due to HMR implementation.

fix

Ensure only one copy of React is loaded; use webpack's resolve.alias to deduplicate.

error TypeError: Cannot read property 'displayName' of undefined at ReactComponent.proxy ↓

cause Incompatible with stateless functional components or component class syntax in older React.

fix

Wrap functional components with React.memo or convert to class component. Or upgrade to React Fast Refresh.

Warnings

deprecated Package is unmaintained and incompatible with Babel 7+ and React 16+. Use @hot-loader/react-dom or react-refresh. ↓

fix Migrate to @pmmmwh/react-refresh-webpack-plugin and @hot-loader/react-dom for modern React HMR.

gotcha This preset must only be used in development; enabling it in production will cause errors. ↓

fix Use Babel's env configuration to restrict the preset to development.

gotcha Requires Babel 6 and React < 16.8. Does not work with Babel 7 or React hooks. ↓

fix Upgrade to a modern HMR solution like React Fast Refresh.

breaking Depends on react-transform-hmr which is no longer maintained and has security advisories. ↓

fix Use react-refresh instead.

Install

npm install babel-preset-react-hmre

yarn add babel-preset-react-hmre

pnpm add babel-preset-react-hmre

Imports

default

wrong

Explicitly installing and requiring 'react-transform-hmr' directly.

correct

Preset is used in .babelrc or Babel config: 'presets': ['react-hmre']

This is a Babel preset, not a direct import. Add it to the development environment in .babelrc.

React

wrong

Importing from 'react-hmre' or similar.

correct

No import needed; React is expected to be present.

This preset modifies React components at build time, not runtime.

catchErrors

wrong

Trying to import 'catchErrors' from the package.

correct

Not imported directly; configured via 'react-transform-catch-errors' as a Babel plugin.

The package provides a Babel preset, not a JavaScript module.

Quickstart

Configures Babel with the react-hmre preset for development hot reloading.

// .babelrc
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

// Install dependencies
npm install --save-dev babel-preset-react-hmre babel-preset-react babel-preset-es2015 webpack webpack-dev-server

webpack.config.js:
module.exports = {
  entry: './src/index.js',
  output: {
    path: '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react-hmre']
          }
        }
      }
    ]
  },
  devServer: {
    hot: true
  }
}