Socket
Socket
Sign inDemoInstall

@pmmmwh/react-refresh-webpack-plugin

Package Overview
Dependencies
336
Maintainers
1
Versions
60
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pmmmwh/react-refresh-webpack-plugin

An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components.


Version published
Maintainers
1
Weekly downloads
6,406,337
decreased by-9.25%

Weekly downloads

Package description

What is @pmmmwh/react-refresh-webpack-plugin?

The @pmmmwh/react-refresh-webpack-plugin npm package enables hot reloading of React components in webpack without losing their state. This is particularly useful during development as it allows developers to see changes in real-time without a full page reload.

What are @pmmmwh/react-refresh-webpack-plugin's main functionalities?

Hot Module Replacement (HMR) for React components

This feature allows React components to be updated in the browser without a full page reload, preserving their state. The code sample shows how to include the plugin in a webpack configuration.

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

module.exports = {
  // ... other webpack config settings ...
  plugins: [
    // ... other plugins ...
    new ReactRefreshWebpackPlugin(),
  ],
};

Other packages similar to @pmmmwh/react-refresh-webpack-plugin

Readme

Source

React Refresh Webpack Plugin

CircleCI License Latest Version Next Version

An EXPERIMENTAL Webpack plugin to enable "Fast Refresh" (also known as Hot Reloading) for React components.

This plugin is not 100% stable. We're hoping to land a v1 release soon - please help us by reporting any issues you've encountered!

Getting Started

Prerequisites

Ensure that you are using at least the minimum supported versions of this plugin's peer dependencies - older versions unfortunately do not contain code to orchestrate "Fast Refresh", and thus cannot be made compatible.

We recommend using the following versions:

DependencyVersion
react16.13.0+, 17.x or 18.x
react-dom16.13.0+, 17.x or 18.x
react-refresh0.10.0+
webpack4.46.0+ or 5.2.0+
Minimum requirements
DependencyVersion
react16.9.0
react-dom16.9.0
react-refresh0.10.0
webpack4.43.0
Using custom renderers (e.g. react-three-fiber, react-pdf, ink)

To ensure full support of "Fast Refresh" with components rendered by custom renderers, you should ensure the renderer you're using depends on a recent version of react-reconciler.

We recommend version 0.25.0 or above, but any versions above 0.22.0 should work.

If the renderer is not compatible, please file them an issue instead.

Installation

With all prerequisites met, you can install this plugin using your package manager of choice:

# if you prefer npm
npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

# if you prefer yarn
yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh

# if you prefer pnpm
pnpm add -D @pmmmwh/react-refresh-webpack-plugin react-refresh

The react-refresh package (from the React team) is a required peer dependency of this plugin. We recommend using version 0.10.0 or above.

Support for TypeScript

TypeScript support is available out-of-the-box for those who use webpack.config.ts.

Our exported types however depends on type-fest, so you'll have to add it as a devDependency:

# if you prefer npm
npm install -D type-fest

# if you prefer yarn
yarn add -D type-fest

# if you prefer pnpm
pnpm add -D type-fest

:memo: Note:

type-fest@2.x only supports Node.js v12.20 or above. If you're using an older version of Node.js, please install type-fest@1.x.

Usage

For most setups, we recommend integrating with babel-loader. It covers the most use cases and is officially supported by the React team.

The example below will assume you're using webpack-dev-server.

If you haven't done so, set up your development Webpack configuration for Hot Module Replacement (HMR).

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  devServer: {
    hot: true,
  },
};
Using webpack-hot-middleware
const webpack = require('webpack');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),
};
Using webpack-plugin-serve
const { WebpackPluginServe } = require('webpack-plugin-serve');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  plugins: [isDevelopment && new WebpackPluginServe()].filter(Boolean),
};

Then, add the react-refresh/babel plugin to your Babel configuration and this plugin to your Webpack configuration.

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

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
            },
          },
        ],
      },
    ],
  },
  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

:memo: Note:

Ensure both the Babel transform (react-refresh/babel) and this plugin are enabled only in development mode!

Using ts-loader

:warning: Warning: This is an un-official integration maintained by the community.

Install react-refresh-typescript. Ensure your TypeScript version is at least 4.0.

# if you prefer npm
npm install -D react-refresh-typescript

# if you prefer yarn
yarn add -D react-refresh-typescript

# if you prefer pnpm
pnpm add -D react-refresh-typescript

Then, instead of wiring up react-refresh/babel via babel-loader, you can wire-up react-refresh-typescript with ts-loader:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const ReactRefreshTypeScript = require('react-refresh-typescript');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              getCustomTransformers: () => ({
                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
              }),
              transpileOnly: isDevelopment,
            },
          },
        ],
      },
    ],
  },
  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

ts-loader won't work with HMR unless transpileOnly is set to true. You should use ForkTsCheckerWebpackPlugin if you need typechecking during development.

Using swc-loader

:warning: Warning: This is an un-official integration maintained by the community.

Ensure your @swc/core version is at least 1.2.86. It is also recommended to use swc-loader version 0.1.13 or above.

Then, instead of wiring up react-refresh/babel via babel-loader, you can wire-up swc-loader and use the refresh transform:

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

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('swc-loader'),
            options: {
              jsc: {
                transform: {
                  react: {
                    development: isDevelopment,
                    refresh: isDevelopment,
                  },
                },
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

Starting from version 0.1.13, swc-loader will set the development option based on Webpack's mode option. swc won't enable fast refresh when development is false.

For more information on how to set up "Fast Refresh" with different integrations, please check out our examples.

Overlay Integration

This plugin integrates with the most common Webpack HMR solutions to surface errors during development - in the form of an error overlay.

By default, webpack-dev-server is used, but you can set the overlay.sockIntegration option to match what you're using.

The supported versions are as follows:

DependencyVersion
webpack-dev-server3.6.0+ or 4.x
webpack-hot-middleware2.x
webpack-plugin-serve0.x or 1.x

API

Please refer to the API docs for all available options.

FAQs and Troubleshooting

Please refer to the Troubleshooting guide for FAQs and resolutions to common issues.

License

This project is licensed under the terms of the MIT License.

Special Thanks

JetBrains Logo

Keywords

FAQs

Last updated on 15 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc