Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@pmmmwh/react-refresh-webpack-plugin
Advanced tools
An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components.
Weekly downloads
Package description
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.
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(),
],
};
React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It is similar to @pmmmwh/react-refresh-webpack-plugin but has been largely superseded by the newer React Fast Refresh feature, which @pmmmwh/react-refresh-webpack-plugin leverages.
Webpack Hot Middleware is a middleware for webpack that allows for hot reloading of modules in development mode. It is similar to @pmmmwh/react-refresh-webpack-plugin in that it supports HMR, but it is more general-purpose and not specifically tailored to React.
Readme
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!
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:
Dependency | Version |
---|---|
react | 16.13.0 +, 17.x or 18.x |
react-dom | 16.13.0 +, 17.x or 18.x |
react-refresh | 0.10.0 + |
webpack | 4.46.0 + or 5.2.0 + |
Dependency | Version |
---|---|
react | 16.9.0 |
react-dom | 16.9.0 |
react-refresh | 0.10.0 |
webpack | 4.43.0 |
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.
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.
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 installtype-fest@1.x
.
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,
},
};
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),
};
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 indevelopment
mode!
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 unlesstranspileOnly
is set totrue
. You should useForkTsCheckerWebpackPlugin
if you need typechecking during development.
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 thedevelopment
option based on Webpack'smode
option.swc
won't enable fast refresh whendevelopment
isfalse
.
For more information on how to set up "Fast Refresh" with different integrations, please check out our examples.
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:
Dependency | Version |
---|---|
webpack-dev-server | 3.6.0 + or 4.x |
webpack-hot-middleware | 2.x |
webpack-plugin-serve | 0.x or 1.x |
Please refer to the API docs for all available options.
Please refer to the Troubleshooting guide for FAQs and resolutions to common issues.
This project is licensed under the terms of the MIT License.
FAQs
An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components.
The npm package @pmmmwh/react-refresh-webpack-plugin receives a total of 5,272,311 weekly downloads. As such, @pmmmwh/react-refresh-webpack-plugin popularity was classified as popular.
We found that @pmmmwh/react-refresh-webpack-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.