npmpackage.info

Gathering detailed insights and metrics for @pmmmwh/react-refresh-webpack-plugin

An interesting fact about npm is that it started as a weekend project by its creator, Isaac Z. Schlueter, in 2009. It was officially launched in January 2010.

@pmmmwh/react-refresh-webpack-plugin

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

0.5.15

3,148

MIT

JavaScript

135.22 kB

1,160,855,463

3.5

Installations

npm install @pmmmwh/react-refresh-webpack-plugin

Score

58.8

Supply Chain

67.6

Quality

74.4

Maintenance

Vulnerability

94.6

License

Pull Requests

Open

3

Total

460

Closed

67

Merged

390

Issues

Open

59

Total

430

Closed

371

Releases

v0.5.15

Published on 03 Jun 2024

v0.5.14

Published on 01 Jun 2024

v0.5.13

Published on 27 Apr 2024

v0.5.12

Published on 27 Apr 2024

v0.5.11

Published on 15 Aug 2023

v0.5.10

Published on 24 Nov 2022

View all 29 releases

Developer

pmmmwh

Module System

BETA

CommonJS

Statistics

3,148 Stars

869 Commits

194 Forks

18 Watching

5 Branches

48 Contributors

Updated on 20 Nov 2024

Bundle Size

434.29 kB

Minified

135.22 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

1,160,855,463

Last day

14%

1,285,173

Compared to previous day

Last week

4.1%

6,681,145

Compared to previous week

Last month

1.4%

28,545,332

Compared to previous month

Last year

-5.8%

337,616,231

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

ansi-html source-map core-js-pure loader-utils schema-utils html-entities error-stack-parser

Peer Dependencies

webpack type-fest react-refresh sockjs-client @types/webpack webpack-dev-server webpack-plugin-serve webpack-hot-middleware

Dev Dependencies

Versions

React Refresh Webpack Plugin

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:

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`+

Minimum requirements

Dependency	Version
`react`	`16.9.0`
`react-dom`	`16.9.0`
`react-refresh`	`0.10.0`
`webpack`	`4.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:

1# if you prefer npm
2npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh
3
4# if you prefer yarn
5yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh
6
7# if you prefer pnpm
8pnpm 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:

1# if you prefer npm
2npm install -D type-fest
3
4# if you prefer yarn
5yarn add -D type-fest
6
7# if you prefer pnpm
8pnpm add -D type-fest

:memo: Note:

type-fest@4.x only supports Node.js v16 or above, type-fest@3.x only supports Node.js v14.16 or above, and 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).

1const isDevelopment = process.env.NODE_ENV !== 'production';
2
3module.exports = {
4  mode: isDevelopment ? 'development' : 'production',
5  devServer: {
6    hot: true,
7  },
8};

Using webpack-hot-middleware

1const webpack = require('webpack');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),
8};

Using webpack-plugin-serve

1const { WebpackPluginServe } = require('webpack-plugin-serve');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  plugins: [isDevelopment && new WebpackPluginServe()].filter(Boolean),
8};

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

1const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  module: {
8    rules: [
9      {
10        test: /\.[jt]sx?$/,
11        exclude: /node_modules/,
12        use: [
13          {
14            loader: require.resolve('babel-loader'),
15            options: {
16              plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
17            },
18          },
19        ],
20      },
21    ],
22  },
23  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
24};

: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.

1# if you prefer npm
2npm install -D react-refresh-typescript
3
4# if you prefer yarn
5yarn add -D react-refresh-typescript
6
7# if you prefer pnpm
8pnpm 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:

1const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
2const ReactRefreshTypeScript = require('react-refresh-typescript');
3
4const isDevelopment = process.env.NODE_ENV !== 'production';
5
6module.exports = {
7  mode: isDevelopment ? 'development' : 'production',
8  module: {
9    rules: [
10      {
11        test: /\.[jt]sx?$/,
12        exclude: /node_modules/,
13        use: [
14          {
15            loader: require.resolve('ts-loader'),
16            options: {
17              getCustomTransformers: () => ({
18                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
19              }),
20              transpileOnly: isDevelopment,
21            },
22          },
23        ],
24      },
25    ],
26  },
27  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
28};

It is recommended to run ts-loader with transpileOnly is set to true. You can use ForkTsCheckerWebpackPlugin as an alternative 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:

1const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  module: {
8    rules: [
9      {
10        test: /\.[jt]sx?$/,
11        exclude: /node_modules/,
12        use: [
13          {
14            loader: require.resolve('swc-loader'),
15            options: {
16              jsc: {
17                transform: {
18                  react: {
19                    development: isDevelopment,
20                    refresh: isDevelopment,
21                  },
22                },
23              },
24            },
25          },
26        ],
27      },
28    ],
29  },
30  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
31};

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:

Dependency	Version
`webpack-dev-server`	`3.6.0`+ or `4.x` or `5.x`
`webpack-hot-middleware`	`2.x`
`webpack-plugin-serve`	`0.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

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.5

/10

Last Scanned on 2024-11-11

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

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

@webpack-zero-config/ts-config

2.0.0

## install ``` pnpm --filter @webpack-zero-config/ts-config add ts-loader react-refresh react-refresh-typescript @pmmmwh/react-refresh-webpack-plugin ```