React Hot Loader

Common errors

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  cause This often occurs if the `react-hot-loader/babel` plugin is missing, leading to issues with hook order changes, or if `react-hot-loader` is not properly patching React before it initializes.
  fix Verify that `react-hot-loader/babel` is correctly configured in your Babel setup and that `react-hot-loader/patch` or `import 'react-hot-loader';` is loaded as the absolute first entry point in your application.

• React-Hot-Loader: "something" is not a valid React Component.

  cause React Hot Loader could not identify the exported component as a valid React component (e.g., a function component, class component, or memoized component). This can happen with incorrect exports or if a HOC wraps something that's not a component.
  fix Ensure that the component you are exporting (and wrapping with `hot()`) is indeed a React component. Check for typos in exports or ensure the component is fully defined before being exported and hot-wrapped.

• React-Hot-Loader: RHL could not be activated.

  cause This message indicates that React Hot Loader failed to inject its patching mechanisms into React, usually because it was loaded after React/ReactDOM, or the `module.hot` API was not available.
  fix Confirm that `'react-hot-loader/patch'` is the very first entry in your Webpack configuration's `entry` array, or that `import 'react-hot-loader';` is the first line of code in your root application file. Also ensure that Webpack's HMR is enabled.

Warnings

• deprecated React Hot Loader is officially superseded by React Fast Refresh. For new projects or existing projects in environments that support it (e.g., React Native, Parcel 2, Webpack with `react-refresh-webpack-plugin`, Create React App v4+, Next.js v9.4+), migration to Fast Refresh is strongly recommended for better stability and experience.
  Fix: Consult your project's build tool documentation for enabling React Fast Refresh. For Webpack, install `react-refresh-webpack-plugin` and configure it in your Webpack and Babel setups. Remove `react-hot-loader` and its associated Babel plugin/Webpack entry points.
• breaking The import path for the 'hot' Higher-Order Component changed in v4. Previously, it was often imported directly from 'react-hot-loader'.
  Fix: Update your import statements to `import { hot } from 'react-hot-loader/root';` when wrapping your application's root component.
• gotcha For proper hooks support and updating during HMR, you must use `@hot-loader/react-dom` by aliasing `react-dom` in your Webpack configuration. Additionally, hooks will only auto-update if they have a non-zero dependency list (e.g., `useEffect(effect, [dep])`) or if specific configuration options (`reloadHooksOnBodyChange`, `reloadLifeCycleHooks`) are enabled.
  Fix: Add `resolve: { alias: { 'react-dom': '@hot-loader/react-dom' } }` to your webpack config. Ensure your hooks have non-empty dependency arrays if you expect them to update, or explicitly configure RHL for broader hook reloading.
• gotcha The Babel plugin `react-hot-loader/babel` is required for React Hot Loader to function correctly, especially for handling changes in hook order without throwing errors. Without it, adding, removing, or reordering hooks might cause a React error.
  Fix: Ensure `react-hot-loader/babel` is included in your `.babelrc` or Babel configuration.
• gotcha React Hot Loader or its `patch` entry point must be loaded *before* React and ReactDOM. Failing to do so will result in RHL not being able to intercept and patch React's mechanisms, leading to HMR failures.
  Fix: Prepend your webpack entry point with `'react-hot-loader/patch'` (e.g., `entry: ['react-hot-loader/patch', './src']`) or ensure `import 'react-hot-loader';` is the very first statement in your application's main entry file.

Install

• npm install react-hot-loader npm
• yarn add react-hot-loader yarn
• pnpm add react-hot-loader pnpm

Imports

• hot
  wrong:

  import { hot } from 'react-hot-loader';

  correct:

  import { hot } from 'react-hot-loader/root';

  Since v4, the 'hot' HOC for wrapping the root component should be imported from 'react-hot-loader/root'.
• setConfig

  import { setConfig } from 'react-hot-loader';

  Used to configure React Hot Loader's behavior globally, such as disabling hooks reloading.
• react-hot-loader/patch
  wrong:

  require('react-hot-loader/patch'); // inside a React component

  correct:

  entry: ['react-hot-loader/patch', './src']

  Used as a Webpack entry point prepend to ensure RHL patches React before it's loaded. Can also be `import 'react-hot-loader';` as the very first line of your main file.

Quickstart

Sets up React Hot Loader with Babel and Webpack, demonstrates basic HMR for a root React component and showcases a reloadable React Hook.

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: ['react-hot-loader/patch', './src/index.tsx'],
  // ... other webpack config
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom' // For hooks support
    },
    extensions: ['.tsx', '.ts', '.js']
  }
};

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader/root';

const App = () => {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    // This hook will reload because its dependency list is non-empty
    console.log('App component mounted or count changed:', count);
  }, [count, "hot"]); // Adding "hot" ensures reloadability

  return (
    <div>
      <h1>Hello React Hot Loader!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <p>Edit this component and save to see HMR in action.</p>
    </div>
  );
};

const HotApp = hot(App);

ReactDOM.render(<HotApp />, document.getElementById('root'));