tessl/npm-react-hot-loader

Tweak React components in real time during development with Hot Module Replacement while preserving component state.

—

Pending

Overview

Eval results

Files

Build Integration

Name: tessl/npm-react-hot-loader
Author: tessl

React Hot Loader provides build-time integration tools including Babel plugin and Webpack loader for automatic component registration and hot reload setup. These tools eliminate the need for manual component registration and provide seamless hot reload experience.

Capabilities

Babel Plugin Integration

Babel plugin that automatically registers React components for hot reloading during the build process.

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

// babel.config.js configuration
module.exports = {
  plugins: [
    "react-hot-loader/babel"
  ]
};

// Webpack babel-loader configuration
{
  test: /\.(js|jsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      plugins: ['react-hot-loader/babel']
    }
  }
}

Usage Examples:

// .babelrc - Basic setup
{
  "presets": ["@babel/preset-react"],
  "plugins": ["react-hot-loader/babel"]
}

// babel.config.js - Advanced setup
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react'
  ],
  plugins: [
    'react-hot-loader/babel',
    '@babel/plugin-proposal-class-properties'
  ],
  env: {
    development: {
      plugins: ['react-hot-loader/babel']
    },
    production: {
      // Exclude hot loader in production
      plugins: []
    }
  }
};

// Webpack configuration with Babel
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            plugins: ['react-hot-loader/babel']
          }
        }
      }
    ]
  }
};

Webpack Loader Integration

Webpack loader that provides hot reload functionality without requiring Babel.

// Webpack configuration
{
  test: /\.(js|jsx)$/,
  use: ['react-hot-loader/webpack']
}

// Combined with other loaders
{
  test: /\.(js|jsx)$/,
  use: [
    'react-hot-loader/webpack',
    'babel-loader'
  ]
}

Usage Examples:

// webpack.config.js - Basic webpack loader setup
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['react-hot-loader/webpack']
      }
    ]
  },
  // ... other config
};

// webpack.config.js - Combined with Babel loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          'react-hot-loader/webpack', // Hot loader first
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
              // Note: Don't include react-hot-loader/babel plugin here
            }
          }
        ]
      }
    ]
  }
};

// webpack.config.js - Development only
module.exports = (env, argv) => ({
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          // Only add hot loader in development
          ...(argv.mode === 'development' ? ['react-hot-loader/webpack'] : []),
          'babel-loader'
        ]
      }
    ]
  }
});

Patch Integration

Runtime patching utility for React methods to enable hot reloading.

// Import at application entry point
import 'react-hot-loader/patch';

// Or require in CommonJS
require('react-hot-loader/patch');

Usage Examples:

// src/index.js - Application entry point
import 'react-hot-loader/patch'; // Must be first import
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

// webpack.config.js - Entry point array
module.exports = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  // ... other config
};

// Next.js integration
// pages/_app.js
import 'react-hot-loader/patch';
import { hot } from 'react-hot-loader/root';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default process.env.NODE_ENV === 'development' 
  ? hot(MyApp) 
  : MyApp;

Build Tool Specific Integrations

Create React App Integration

// Using react-app-rewired and customize-cra
// config-overrides.js
const { addBabelPlugin, override } = require('customize-cra');

module.exports = override(
  addBabelPlugin('react-hot-loader/babel')
);

// Using craco
// craco.config.js
module.exports = {
  babel: {
    plugins: ['react-hot-loader/babel']
  }
};

Next.js Integration

// next.config.js
module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      config.module.rules.push({
        test: /\.(jsx|js)$/,
        include: [path.resolve(__dirname, 'pages')],
        use: ['react-hot-loader/webpack']
      });
    }
    return config;
  }
};

// .babelrc for Next.js
{
  "presets": ["next/babel"],
  "plugins": ["react-hot-loader/babel"]
}

Vite Integration

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['react-hot-loader/babel']
      }
    })
  ]
});

Parcel Integration

// .babelrc for Parcel
{
  "presets": ["@babel/preset-react"],
  "plugins": ["react-hot-loader/babel"]
}

// src/index.js with Parcel
import 'react-hot-loader/patch';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader/root';
import App from './App';

const HotApp = hot(App);

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

Advanced Configuration

Babel Plugin Options

// .babelrc with options
{
  "plugins": [
    ["react-hot-loader/babel", {
      "safetyNet": true  // Enable safety net (default: true)
    }]
  ]
}

Webpack Loader Options

// webpack.config.js with loader options
{
  test: /\.jsx?$/,
  use: {
    loader: 'react-hot-loader/webpack',
    options: {
      withPatch: true,     // Include patch (default: true)
      noRegister: false    // Skip registration (default: false)
    }
  }
}

Environment-Specific Configuration

// webpack.config.js - Environment specific
module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';
  
  return {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            // Only in development
            ...(isDevelopment ? ['react-hot-loader/webpack'] : []),
            {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-react'],
                plugins: [
                  // Only in development
                  ...(isDevelopment ? ['react-hot-loader/babel'] : [])
                ]
              }
            }
          ]
        }
      ]
    }
  };
};

Troubleshooting Build Integration

Common Issues and Solutions

// Issue: Hot reloading not working
// Solution: Ensure correct order in webpack config
{
  test: /\.jsx?$/,
  use: [
    'react-hot-loader/webpack', // Must be first
    'babel-loader'
  ]
}

// Issue: Babel plugin conflicts
// Solution: Use either babel plugin OR webpack loader, not both
// ❌ Don't do this:
{
  loader: 'babel-loader',
  options: {
    plugins: ['react-hot-loader/babel'] // Don't use if using webpack loader
  }
}

// ✅ Do this:
{
  test: /\.jsx?$/,
  use: ['react-hot-loader/webpack'] // Use webpack loader instead
}

Debug Configuration

// webpack.config.js - Debug hot reload
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'react-hot-loader/webpack',
            options: {
              withPatch: true,
              noRegister: false
            }
          }
        ]
      }
    ]
  },
  // Enable detailed webpack output
  stats: 'verbose'
};

Testing Build Configuration

// Test component for verifying hot reload
// src/TestComponent.js
import React from 'react';
import { hot } from 'react-hot-loader/root';

const TestComponent = () => {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h1>Hot Reload Test</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <p>Change this text to test hot reload!</p>
    </div>
  );
};

export default hot(TestComponent);

Performance Optimization

Build Performance

// webpack.config.js - Optimize for build performance
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'react-hot-loader/webpack',
            options: {
              // Skip registration in certain cases for better performance
              noRegister: process.env.SKIP_HOT_LOADER === 'true'
            }
          }
        ]
      }
    ]
  }
};

Production Exclusion

// Ensure hot loader is completely excluded from production builds
const webpack = require('webpack');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  
  return {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            // Completely exclude in production
            ...(!isProduction ? ['react-hot-loader/webpack'] : []),
            'babel-loader'
          ]
        }
      ]
    },
    plugins: [
      // Define environment for conditional imports
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(argv.mode)
      })
    ]
  };
};

Install with Tessl CLI