{"id":26788,"library":"babel-preset-react-hmre","title":"babel-preset-react-hmre","description":"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.","status":"deprecated","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/danmartinez101/babel-preset-react-hmre","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-react-hmre","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-react-hmre","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-react-hmre","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires Babel 6.x to function; not compatible with Babel 7+.","package":"babel-core","optional":false},{"reason":"Core dependency for React Hot Module Replacement.","package":"react-transform-hmr","optional":false},{"reason":"Provides error catching in development builds.","package":"react-transform-catch-errors","optional":true}],"imports":[{"note":"This is a Babel preset, not a direct import. Add it to the development environment in .babelrc.","wrong":"Explicitly installing and requiring 'react-transform-hmr' directly.","symbol":"default","correct":"Preset is used in .babelrc or Babel config: 'presets': ['react-hmre']"},{"note":"This preset modifies React components at build time, not runtime.","wrong":"Importing from 'react-hmre' or similar.","symbol":"React","correct":"No import needed; React is expected to be present."},{"note":"The package provides a Babel preset, not a JavaScript module.","wrong":"Trying to import 'catchErrors' from the package.","symbol":"catchErrors","correct":"Not imported directly; configured via 'react-transform-catch-errors' as a Babel plugin."}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\"react\", \"es2015\"],\n  \"env\": {\n    \"development\": {\n      \"presets\": [\"react-hmre\"]\n    }\n  }\n}\n\n// Install dependencies\nnpm install --save-dev babel-preset-react-hmre babel-preset-react babel-preset-es2015 webpack webpack-dev-server\n\nwebpack.config.js:\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: '/dist',\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.jsx?$/,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            presets: ['react-hmre']\n          }\n        }\n      }\n    ]\n  },\n  devServer: {\n    hot: true\n  }\n}","lang":"javascript","description":"Configures Babel with the react-hmre preset for development hot reloading."},"warnings":[{"fix":"Migrate to @pmmmwh/react-refresh-webpack-plugin and @hot-loader/react-dom for modern React HMR.","message":"Package is unmaintained and incompatible with Babel 7+ and React 16+. Use @hot-loader/react-dom or react-refresh.","severity":"deprecated","affected_versions":">=1.1.1"},{"fix":"Use Babel's env configuration to restrict the preset to development.","message":"This preset must only be used in development; enabling it in production will cause errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to a modern HMR solution like React Fast Refresh.","message":"Requires Babel 6 and React < 16.8. Does not work with Babel 7 or React hooks.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use react-refresh instead.","message":"Depends on react-transform-hmr which is no longer maintained and has security advisories.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install the package: npm install --save-dev babel-preset-react-hmre. Ensure Babel 6 is used, or switch to a modern alternative.","cause":"Missing dependency or using with Babel 7+ which changed preset resolution.","error":"Error: Module 'babel-preset-react-hmre' is not found"},{"fix":"Ensure only one copy of React is loaded; use webpack's resolve.alias to deduplicate.","cause":"Conflicting React versions due to HMR implementation.","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"},{"fix":"Wrap functional components with React.memo or convert to class component. Or upgrade to React Fast Refresh.","cause":"Incompatible with stateless functional components or component class syntax in older React.","error":"TypeError: Cannot read property 'displayName' of undefined at ReactComponent.proxy"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}