or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

client-utilities.mderror-overlay.mdindex.mdloader-configuration.mdplugin-configuration.mdplugin-utilities.mdruntime-utilities.mdsocket-integrations.md
tile.json

tessl/npm-pmmmwh--react-refresh-webpack-plugin

Webpack plugin to enable React Fast Refresh (Hot Reloading) for React components during development

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@pmmmwh/react-refresh-webpack-plugin@0.6.x

To install, run

npx @tessl/cli install tessl/npm-pmmmwh--react-refresh-webpack-plugin@0.6.0

index.mddocs/

React Refresh Webpack Plugin

React Refresh Webpack Plugin enables "Fast Refresh" (Hot Reloading) for React components during development. It integrates with React's Fast Refresh feature to provide instant feedback when editing React components without losing component state, significantly improving the development experience.

Package Information

  • Package Name: @pmmmwh/react-refresh-webpack-plugin
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

Core Imports

const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

For ES modules:

import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';

For webpack loader:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@pmmmwh/react-refresh-webpack-plugin/loader',
            options: { /* loader options */ }
          }
        ],
      },
    ],
  },
};

Additional Import Patterns:

// Plugin utilities
const utils = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Loader utilities  
const loaderUtils = require('@pmmmwh/react-refresh-webpack-plugin/loader/utils');

// Runtime utilities
const RefreshUtils = require('@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils');

// Client utilities
const errorHandlers = require('@pmmmwh/react-refresh-webpack-plugin/client/utils/errorEventHandlers');
const formatErrors = require('@pmmmwh/react-refresh-webpack-plugin/client/utils/formatWebpackErrors');
const retry = require('@pmmmwh/react-refresh-webpack-plugin/client/utils/retry');

// Overlay components and utilities
const theme = require('@pmmmwh/react-refresh-webpack-plugin/overlay/theme');
const overlayUtils = require('@pmmmwh/react-refresh-webpack-plugin/overlay/utils');

// Options utilities
const { d, n } = require('@pmmmwh/react-refresh-webpack-plugin/options');

Basic Usage

// webpack.config.js
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  plugins: [
    new ReactRefreshPlugin({
      overlay: {
        sockIntegration: 'wds'
      }
    }),
  ],
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['react-refresh/babel'],
            },
          },
        ],
      },
    ],
  },
};

Architecture

The plugin is built around several key components:

  • ReactRefreshPlugin: Main Webpack plugin that orchestrates Fast Refresh integration
  • ReactRefreshLoader: Webpack loader that injects React Refresh runtime code into modules
  • Error Overlay System: Built-in error overlay for displaying compilation and runtime errors
  • Socket Integrations: Client-server communication for different development servers (webpack-dev-server, webpack-hot-middleware, webpack-plugin-serve)
  • Client Runtime: Browser-side code that handles module updates and error reporting

Capabilities

Main Plugin

Core Webpack plugin that enables React Fast Refresh functionality with comprehensive configuration options.

class ReactRefreshPlugin {
  constructor(options?: ReactRefreshPluginOptions);
  apply(compiler: import('webpack').Compiler): void;
  readonly options: NormalizedPluginOptions;
}

interface ReactRefreshPluginOptions {
  esModule?: boolean | ESModuleOptions;
  exclude?: string | RegExp | (string | RegExp)[];
  forceEnable?: boolean;
  include?: string | RegExp | (string | RegExp)[];
  library?: string;
  overlay?: boolean | ErrorOverlayOptions;
}

Plugin Configuration

Webpack Loader

Loader that injects React Refresh HMR code into JavaScript/TypeScript modules.

function ReactRefreshLoader(
  this: import('webpack').LoaderContext<ReactRefreshLoaderOptions>,
  source: string,
  inputSourceMap?: import('source-map').RawSourceMap,
  meta?: any
): void;

interface ReactRefreshLoaderOptions {
  const?: boolean;
  esModule?: boolean | ESModuleOptions;
}

Loader Configuration

Error Overlay System

Built-in error overlay that displays compilation and runtime errors during development.

interface ErrorOverlayOptions {
  entry?: string | false;
  module?: string | false;
  sockIntegration?: 'wds' | 'whm' | 'wps' | false | string;
}

// Required overlay module exports
function handleRuntimeError(error: Error): void;
function clearRuntimeErrors(): void;
function showCompileError(webpackErrorMessage: string): void;
function clearCompileError(): void;

Error Overlay

Socket Integrations

Pre-built socket integrations for popular development servers.

// Built-in integrations
type SocketIntegration = 'wds' | 'whm' | 'wps' | false | string;

// Integration modules
const WDSSocket = require('@pmmmwh/react-refresh-webpack-plugin/sockets/WDSSocket');
const WPSSocket = require('@pmmmwh/react-refresh-webpack-plugin/sockets/WPSSocket');
const WHMEventSource = require('@pmmmwh/react-refresh-webpack-plugin/sockets/WHMEventSource');

Socket Integrations

Plugin Utilities

Core utility functions for advanced plugin integration and customization.

const {
  getAdditionalEntries,
  getIntegrationEntry,
  getSocketIntegration,
  injectRefreshLoader,
  makeRefreshRuntimeModule,
  normalizeOptions,
} = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

Plugin Utilities

Runtime Utilities

React Refresh runtime utilities for module boundary detection and registration.

const RefreshUtils = require('@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils');

interface RefreshUtils {
  enqueueUpdate(): void;
  executeRuntime(): void;
  getModuleExports(moduleId: string): any;
  isReactRefreshBoundary(moduleExports: any): boolean;
  registerExportsForReactRefresh(moduleId: string, moduleExports: any): void;
}

Runtime Utilities

Client Utilities

Browser-side utilities for error handling and connection management.

// Error event handlers
const { handleError, handleUnhandledRejection } = require('@pmmmwh/react-refresh-webpack-plugin/client/utils/errorEventHandlers');

// Error formatting
const formatWebpackErrors = require('@pmmmwh/react-refresh-webpack-plugin/client/utils/formatWebpackErrors');

// Connection retry logic
const runWithRetry = require('@pmmmwh/react-refresh-webpack-plugin/client/utils/retry');

Client Utilities

Types

interface ESModuleOptions {
  exclude?: string | RegExp | (string | RegExp)[];
  include?: string | RegExp | (string | RegExp)[];
}

interface NormalizedPluginOptions extends 
  Omit<ReactRefreshPluginOptions, 'overlay'> {
  exclude: string | RegExp | (string | RegExp)[];
  include: string | RegExp | (string | RegExp)[];
  overlay: false | NormalizedErrorOverlayOptions;
}

interface NormalizedErrorOverlayOptions {
  entry: string | false;
  module: string | false;
  sockIntegration: string | false;
}

interface NormalizedLoaderOptions {
  const: boolean;
  esModule?: boolean | ESModuleOptions;
}

interface HMRMessage {
  type: 'ok' | 'warnings' | 'errors' | 'hash' | 'still-ok' | 'invalid';
  data?: any;
  hash?: string;
  warnings?: string[];
  errors?: string[];
}

interface FormattedError {
  message: string;
  stack?: string;
  file?: string;
  lineNumber?: number;
  columnNumber?: number;
}