{"_id":"@modern-js/react-refresh-webpack-plugin","_rev":"7-71ac254ab768e71b7d3db508e0327f6c","name":"@modern-js/react-refresh-webpack-plugin","dist-tags":{"latest":"0.5.8"},"versions":{"0.5.8":{"name":"@modern-js/react-refresh-webpack-plugin","version":"0.5.8","keywords":["react","javascript","webpack","refresh","hmr","hotreload","livereload","live","edit","hot","reload"],"author":{"name":"Michael Mok"},"license":"MIT","_id":"@modern-js/react-refresh-webpack-plugin@0.5.8","maintainers":[{"name":"sanyuan0704","email":"sanyuan0704@gmail.com"},{"name":"derozan","email":"fupeng.antik@gmail.com"},{"name":"xieqixuan.xx","email":"xieqixuan.xx@bytedance.com"},{"name":"chenfuqiang","email":"heychenfq@foxmail.com"},{"name":"shawzhou","email":"codingzx@gmail.com"},{"name":"chenjiahan","email":"416417567@163.com"},{"name":"xuchaobei","email":"jasonxu.zju@gmail.com"},{"name":"webinfrabot","email":"webinfra@bytedance.com"},{"name":"targeral","email":"targeral@outlook.com"},{"name":"yimingjfe","email":"527990618@163.com"},{"name":"caohuilin","email":"1057275848@qq.com"},{"name":"kky_kongjiacong","email":"870803309@qq.com"},{"name":"bytednpm","email":"bnpm@bytedance.com"},{"name":"dexteryy","email":"dexter.yy@gmail.com"}],"homepage":"https://github.com/pmmmwh/react-refresh-webpack-plugin#readme","bugs":{"url":"https://github.com/pmmmwh/react-refresh-webpack-plugin/issues"},"dist":{"shasum":"8cb867c22170c1ab9b08d89d19bd7b55894f6e4f","tarball":"https://registry.npmjs.org/@modern-js/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.8.tgz","fileCount":58,"integrity":"sha512-bdhpVaQb1qZwZ1FTAp6oQfWhQkQj6UNk1R6tV7CgsqUEUmHQv3muV63WDzZ/2aAIJZ9x3DY+wXqyKD62SKVKbw==","signatures":[{"sig":"MEYCIQDNApEF69L4Dci7Ie6+wY2tzqjRZ6jpFjvCPy0fvMwZRQIhAICDkgRm4OPk33eSSWybt3B4IJbuFHPUmZNMlUYDg2yG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQRbbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6oQ//YvDz5Lwf/aqcsvNsdWNRfEYOicw+f+eOXl55Dbf1UMB1TWtN\r\nkSKkfrZWbzYtxU2m6O6oxvco37RqEMqCTxeFEfZqCfCHDvNbwof37ygSbQZ/\r\nl9MYRUGipR7z3x6IohGg6M1MtPCBV4KXm8/94GY+DjJjcCuY0gdFDLvEEXU1\r\nzpjdHhi7btWhfOnk5FdrPCX8uuUeipjOCgqrfjrfR6LbpyjRxLhH/2xsvP8a\r\nKtXWjkBm2BrZXvNP6WmLmAKQESdkBMIdEa3holHxwd0JyeDbtzxUUDNtQzgE\r\nBsBbyLYTAQrEsl+uZp4S0d1JWMGTF4DIB4WSiSPVeBB7bG2oT1droJ9gDzOm\r\noMvEyHySbzgKSBkW3zumUSoCDAbfoyoz16xn0BOmWbMs2x6dHEDC7XSCALUT\r\nFAhpa5E9JBgaJvMwaT66A2cDJ8IAGIZV7MPc1IenSLhP9TMwDk99RxwTn6Qs\r\nRGj8AsXxfeajpXOCbWmJ3HJPdWam6kxLwoJf5HpZDFzE+e4P6VYMVXwT74m0\r\nHV3IuHbt9FrO5IkTXLhm+Q8R6ifwFilzUJIBjwQfVtdLnAdEtNSF1MMHYJxp\r\nGOHUVZMjDPBpaLYiR7JS3zeLXokNLyJdLsO+pw21wehW/pod385j5wiShSIt\r\nIz15M3ADb5qQVBgQg+mYU9p3achALCKoKgo=\r\n=y086\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","_from":"file:modern-js-react-refresh-webpack-plugin-0.5.8.tgz","types":"types/lib/index.d.ts","engines":{"node":">= 10.13"},"scripts":{"lint":"eslint --report-unused-disable-directives --ext .js,.jsx .","test":"run-s -c test:pre \"test:exec {@}\" test:post --","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"","lint:fix":"yarn lint --fix","test:pre":"run-s yalc:publish yalc:add","yalc:add":"yalc add --dev @pmmmwh/react-refresh-webpack-plugin","test:exec":"node scripts/test.js","test:post":"yarn yalc:clean","yalc:clean":"yalc remove --all","types:clean":"rimraf types","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\"","yalc:publish":"yalc publish --no-scripts","types:compile":"tsc -p tsconfig.json","generate-types":"run-s types:clean types:compile types:prune-private \"format --loglevel silent\"","test:webpack-4":"cross-env WEBPACK_VERSION=4 yarn test","types:prune-private":"del \"types/*/*\" \"!types/{lib,loader,options}/{index,types}.d.ts\""},"_npmUser":{"name":"chenjiahan","email":"416417567@163.com"},"_resolved":"","_integrity":"","repository":{"url":"git+https://github.com/pmmmwh/react-refresh-webpack-plugin.git","type":"git"},"_npmVersion":"6.14.17","description":"An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.","directories":{},"resolutions":{"type-fest":"3.0.0"},"_nodeVersion":"14.20.0","dependencies":{"find-up":"^5.0.0","source-map":"^0.7.3","core-js-pure":"^3.23.3","loader-utils":"^2.0.0","schema-utils":"^3.0.0","html-entities":"^2.1.0","common-path-prefix":"^3.0.0","error-stack-parser":"^2.0.6","ansi-html-community":"^0.0.8"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"yn":"^4.0.0","jest":"^27.0.5","yalc":"^1.0.0-pre.53","memfs":"^3.2.0","eslint":"^8.6.0","nanoid":"^3.1.31","semver":"^7.3.5","del-cli":"^4.0.1","webpack":"^5.42.0","fs-extra":"^10.0.0","get-port":"^5.1.1","prettier":"^2.3.0","cross-env":"^7.0.3","puppeteer":"^13.4.0","type-fest":"^3.0.0","jest-junit":"^13.0.0","typescript":"4.8.3","@babel/core":"^7.14.2","@types/jest":"^27.0.1","@types/node":"^18.7.21","cross-spawn":"^7.0.3","npm-run-all":"^4.1.5","webpack-cli":"^4.7.2","babel-loader":"^8.1.0","module-alias":"^2.2.2","@types/semver":"^7.3.9","react-refresh":"^0.14.0","@types/webpack":"^5.28.0","webpack.legacy":"npm:webpack@4.x","@types/fs-extra":"^9.0.4","@types/cross-spawn":"^6.0.2","@types/json-schema":"^7.0.6","webpack-cli.legacy":"npm:webpack-cli@3.x","webpack-dev-server":"^4.2.1","@types/module-alias":"^2.0.0","sourcemap-validator":"^2.1.0","webpack-plugin-serve":"^1.4.1","jest-environment-node":"^27.0.5","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","webpack-hot-middleware":"^2.25.0","webpack-dev-server.legacy":"npm:webpack-dev-server@3.x","@babel/plugin-transform-modules-commonjs":"^7.14.0"},"peerDependencies":{"webpack":">=4.43.0 <6.0.0","type-fest":">=0.17.0 <4.0.0","react-refresh":">=0.10.0 <1.0.0","sockjs-client":"^1.4.0","@types/webpack":"4.x || 5.x","webpack-dev-server":"3.x || 4.x","webpack-plugin-serve":"0.x || 1.x","webpack-hot-middleware":"2.x"},"peerDependenciesMeta":{"type-fest":{"optional":true},"sockjs-client":{"optional":true},"@types/webpack":{"optional":true},"webpack-dev-server":{"optional":true},"webpack-plugin-serve":{"optional":true},"webpack-hot-middleware":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-refresh-webpack-plugin_0.5.8_1665210075303_0.6686347228371916","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-10-08T06:21:15.226Z","modified":"2026-10-19T07:02:31.757Z","0.5.8":"2022-10-08T06:21:15.489Z"},"bugs":{"url":"https://github.com/pmmmwh/react-refresh-webpack-plugin/issues"},"author":{"name":"Michael Mok"},"license":"MIT","homepage":"https://github.com/pmmmwh/react-refresh-webpack-plugin#readme","keywords":["react","javascript","webpack","refresh","hmr","hotreload","livereload","live","edit","hot","reload"],"repository":{"url":"git+https://github.com/pmmmwh/react-refresh-webpack-plugin.git","type":"git"},"description":"An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.","maintainers":[{"email":"bnpm@bytedance.com","name":"bytednpm"},{"email":"870803309@qq.com","name":"kky_kongjiacong"},{"email":"1057275848@qq.com","name":"caohuilin"},{"email":"zhangxiang.01@bytedance.com","name":"zhangxiang.01"}],"readme":"# React Refresh Webpack Plugin\n\n[circleci]: https://app.circleci.com/pipelines/github/pmmmwh/react-refresh-webpack-plugin\n[circleci:badge]: https://img.shields.io/circleci/project/github/pmmmwh/react-refresh-webpack-plugin/main\n[license:badge]: https://img.shields.io/github/license/pmmmwh/react-refresh-webpack-plugin\n[npm:latest]: https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin/v/latest\n[npm:latest:badge]: https://img.shields.io/npm/v/@pmmmwh/react-refresh-webpack-plugin/latest\n[npm:next]: https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin/v/next\n[npm:next:badge]: https://img.shields.io/npm/v/@pmmmwh/react-refresh-webpack-plugin/next\n\n[![CircleCI][circleci:badge]][circleci]\n[![License][license:badge]](./LICENSE)\n[![Latest Version][npm:latest:badge]][npm:latest]\n[![Next Version][npm:next:badge]][npm:next]\n\nAn **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also known as _Hot Reloading_) for React components.\n\n> This plugin is not 100% stable.\n> We're hoping to land a v1 release soon - please help us by reporting any issues you've encountered!\n\n## Getting Started\n\n### Prerequisites\n\nEnsure that you are using at least the minimum supported versions of this plugin's peer dependencies -\nolder versions unfortunately do not contain code to orchestrate \"Fast Refresh\",\nand thus cannot be made compatible.\n\nWe recommend using the following versions:\n\n| Dependency      | Version                      |\n| --------------- | ---------------------------- |\n| `react`         | `16.13.0`+, `17.x` or `18.x` |\n| `react-dom`     | `16.13.0`+, `17.x` or `18.x` |\n| `react-refresh` | `0.10.0`+                    |\n| `webpack`       | `4.46.0`+ or `5.2.0`+        |\n\n<details>\n<summary>Minimum requirements</summary>\n<br />\n\n| Dependency      | Version  |\n| --------------- | -------- |\n| `react`         | `16.9.0` |\n| `react-dom`     | `16.9.0` |\n| `react-refresh` | `0.10.0` |\n| `webpack`       | `4.43.0` |\n\n</details>\n\n<details>\n<summary>Using custom renderers (e.g. <code>react-three-fiber</code>, <code>react-pdf</code>, <code>ink</code>)</summary>\n<br />\n\nTo ensure full support of \"Fast Refresh\" with components rendered by custom renderers,\nyou should ensure the renderer you're using depends on a recent version of `react-reconciler`.\n\nWe recommend version `0.25.0` or above, but any versions above `0.22.0` should work.\n\nIf the renderer is not compatible, please file them an issue instead.\n\n</details>\n\n### Installation\n\nWith all prerequisites met, you can install this plugin using your package manager of choice:\n\n```sh\n# if you prefer npm\nnpm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh\n\n# if you prefer yarn\nyarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh\n\n# if you prefer pnpm\npnpm add -D @pmmmwh/react-refresh-webpack-plugin react-refresh\n```\n\nThe `react-refresh` package (from the React team) is a required peer dependency of this plugin.\nWe recommend using version `0.10.0` or above.\n\n<details>\n<summary>Support for TypeScript</summary>\n<br />\n\nTypeScript support is available out-of-the-box for those who use `webpack.config.ts`.\n\nOur exported types however depends on `type-fest`, so you'll have to add it as a `devDependency`:\n\n```sh\n# if you prefer npm\nnpm install -D type-fest\n\n# if you prefer yarn\nyarn add -D type-fest\n\n# if you prefer pnpm\npnpm add -D type-fest\n```\n\n> **:memo: Note**:\n>\n> `type-fest@2.x` only supports Node.js v12.20 or above.\n> If you're using an older version of Node.js, please install `type-fest@1.x`.\n\n</details>\n\n### Usage\n\nFor most setups, we recommend integrating with `babel-loader`.\nIt covers the most use cases and is officially supported by the React team.\n\nThe example below will assume you're using `webpack-dev-server`.\n\nIf you haven't done so, set up your development Webpack configuration for Hot Module Replacement (HMR).\n\n```js\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  mode: isDevelopment ? 'development' : 'production',\n  devServer: {\n    hot: true,\n  },\n};\n```\n\n<details>\n<summary>Using <code>webpack-hot-middleware</code></summary>\n<br />\n\n```js\nconst webpack = require('webpack');\n\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  mode: isDevelopment ? 'development' : 'production',\n  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),\n};\n```\n\n</details>\n\n<details>\n<summary>Using <code>webpack-plugin-serve</code></summary>\n<br />\n\n```js\nconst { WebpackPluginServe } = require('webpack-plugin-serve');\n\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  mode: isDevelopment ? 'development' : 'production',\n  plugins: [isDevelopment && new WebpackPluginServe()].filter(Boolean),\n};\n```\n\n</details>\n\nThen, add the `react-refresh/babel` plugin to your Babel configuration and this plugin to your Webpack configuration.\n\n```js\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\n\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  mode: isDevelopment ? 'development' : 'production',\n  module: {\n    rules: [\n      {\n        test: /\\.[jt]sx?$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: require.resolve('babel-loader'),\n            options: {\n              plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),\n};\n```\n\n> **:memo: Note**:\n>\n> Ensure both the Babel transform (`react-refresh/babel`) and this plugin are enabled only in `development` mode!\n\n<details>\n<summary>Using <code>ts-loader</code></summary>\n<br />\n\n> **:warning: Warning**:\n> This is an un-official integration maintained by the community.\n\nInstall [`react-refresh-typescript`](https://github.com/Jack-Works/react-refresh-transformer/tree/main/typescript).\nEnsure your TypeScript version is at least 4.0.\n\n```sh\n# if you prefer npm\nnpm install -D react-refresh-typescript\n\n# if you prefer yarn\nyarn add -D react-refresh-typescript\n\n# if you prefer pnpm\npnpm add -D react-refresh-typescript\n```\n\nThen, instead of wiring up `react-refresh/babel` via `babel-loader`,\nyou can wire-up `react-refresh-typescript` with `ts-loader`:\n\n```js\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst ReactRefreshTypeScript = require('react-refresh-typescript');\n\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  mode: isDevelopment ? 'development' : 'production',\n  module: {\n    rules: [\n      {\n        test: /\\.[jt]sx?$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: require.resolve('ts-loader'),\n            options: {\n              getCustomTransformers: () => ({\n                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),\n              }),\n              transpileOnly: isDevelopment,\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),\n};\n```\n\n> `ts-loader` won't work with HMR unless `transpileOnly` is set to `true`.\n> You should use `ForkTsCheckerWebpackPlugin` if you need typechecking during development.\n\n</details>\n\n<details>\n<summary>Using <code>swc-loader</code></summary>\n<br />\n\n> **:warning: Warning**:\n> This is an un-official integration maintained by the community.\n\nEnsure your `@swc/core` version is at least `1.2.86`.\nIt is also recommended to use `swc-loader` version `0.1.13` or above.\n\nThen, instead of wiring up `react-refresh/babel` via `babel-loader`,\nyou can wire-up `swc-loader` and use the `refresh` transform:\n\n```js\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\n\nconst isDevelopment = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  mode: isDevelopment ? 'development' : 'production',\n  module: {\n    rules: [\n      {\n        test: /\\.[jt]sx?$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: require.resolve('swc-loader'),\n            options: {\n              jsc: {\n                transform: {\n                  react: {\n                    development: isDevelopment,\n                    refresh: isDevelopment,\n                  },\n                },\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),\n};\n```\n\n> Starting from version `0.1.13`, `swc-loader` will set the `development` option based on Webpack's `mode` option.\n> `swc` won't enable fast refresh when `development` is `false`.\n\n</details>\n\nFor more information on how to set up \"Fast Refresh\" with different integrations,\nplease check out [our examples](examples).\n\n### Overlay Integration\n\nThis plugin integrates with the most common Webpack HMR solutions to surface errors during development -\nin the form of an error overlay.\n\nBy default, `webpack-dev-server` is used,\nbut you can set the [`overlay.sockIntegration`](docs/API.md#sockintegration) option to match what you're using.\n\nThe supported versions are as follows:\n\n| Dependency               | Version           |\n| ------------------------ | ----------------- |\n| `webpack-dev-server`     | `3.6.0`+ or `4.x` |\n| `webpack-hot-middleware` | `2.x`             |\n| `webpack-plugin-serve`   | `0.x` or `1.x`    |\n\n## API\n\nPlease refer to [the API docs](docs/API.md) for all available options.\n\n## FAQs and Troubleshooting\n\nPlease refer to [the Troubleshooting guide](docs/TROUBLESHOOTING.md) for FAQs and resolutions to common issues.\n\n## License\n\nThis project is licensed under the terms of the [MIT License](/LICENSE).\n\n## Special Thanks\n\n<a href=\"https://jb.gg/OpenSource?from=ReactRefreshWebpackPlugin\" target=\"_blank\">\n  <img\n    alt=\"JetBrains Logo\"\n    src=\"https://user-images.githubusercontent.com/9338255/132110580-61d3dba5-f5c7-4479-bd8e-39cd65b42fc5.png\"\n    width=\"120\"\n  />\n</a>\n","readmeFilename":"README.md"}