{"_id":"@modern-js/react-refresh-webpack-plugin","_rev":"3109216","name":"@modern-js/react-refresh-webpack-plugin","description":"An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.","dist-tags":{"latest":"0.5.8"},"maintainers":[{"name":"bytednpm","email":""},{"name":"caohuilin","email":""},{"name":"chenjiahan","email":""},{"name":"derozan","email":""},{"name":"jingkai.zhao","email":""},{"name":"jserfeng","email":""},{"name":"kky_kongjiacong","email":""},{"name":"sanyuan0704","email":""},{"name":"shawzhou","email":""},{"name":"targeral","email":""},{"name":"webinfrabot","email":""},{"name":"xieqixuan.xx","email":""},{"name":"xuchaobei","email":""},{"name":"yimingjfe","email":""}],"time":{"modified":"2023-11-27T05:22:55.000Z","created":"2022-10-08T06:21:15.489Z","0.5.8":"2022-10-08T06:21:15.489Z"},"users":{},"author":{"name":"Michael Mok"},"repository":{"type":"git","url":"git+https://github.com/pmmmwh/react-refresh-webpack-plugin.git"},"versions":{"0.5.8":{"name":"@modern-js/react-refresh-webpack-plugin","version":"0.5.8","description":"An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.","keywords":["react","javascript","webpack","refresh","hmr","hotreload","livereload","live","edit","hot","reload"],"homepage":"https://github.com/pmmmwh/react-refresh-webpack-plugin#readme","bugs":{"url":"https://github.com/pmmmwh/react-refresh-webpack-plugin/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/pmmmwh/react-refresh-webpack-plugin.git"},"license":"MIT","author":{"name":"Michael Mok"},"main":"lib/index.js","types":"types/lib/index.d.ts","dependencies":{"ansi-html-community":"^0.0.8","common-path-prefix":"^3.0.0","core-js-pure":"^3.23.3","error-stack-parser":"^2.0.6","find-up":"^5.0.0","html-entities":"^2.1.0","loader-utils":"^2.0.0","schema-utils":"^3.0.0","source-map":"^0.7.3"},"devDependencies":{"@babel/core":"^7.14.2","@babel/plugin-transform-modules-commonjs":"^7.14.0","@types/cross-spawn":"^6.0.2","@types/fs-extra":"^9.0.4","@types/jest":"^27.0.1","@types/json-schema":"^7.0.6","@types/module-alias":"^2.0.0","@types/node":"^18.7.21","@types/semver":"^7.3.9","@types/webpack":"^5.28.0","babel-loader":"^8.1.0","cross-env":"^7.0.3","cross-spawn":"^7.0.3","del-cli":"^4.0.1","eslint":"^8.6.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","fs-extra":"^10.0.0","get-port":"^5.1.1","jest":"^27.0.5","jest-environment-node":"^27.0.5","jest-junit":"^13.0.0","memfs":"^3.2.0","module-alias":"^2.2.2","nanoid":"^3.1.31","npm-run-all":"^4.1.5","prettier":"^2.3.0","puppeteer":"^13.4.0","react-refresh":"^0.14.0","semver":"^7.3.5","sourcemap-validator":"^2.1.0","type-fest":"^3.0.0","typescript":"4.8.3","webpack":"^5.42.0","webpack-cli":"^4.7.2","webpack-cli.legacy":"npm:webpack-cli@3.x","webpack-dev-server":"^4.2.1","webpack-dev-server.legacy":"npm:webpack-dev-server@3.x","webpack-hot-middleware":"^2.25.0","webpack-plugin-serve":"^1.4.1","webpack.legacy":"npm:webpack@4.x","yalc":"^1.0.0-pre.53","yn":"^4.0.0"},"peerDependencies":{"@types/webpack":"4.x || 5.x","react-refresh":">=0.10.0 <1.0.0","sockjs-client":"^1.4.0","type-fest":">=0.17.0 <4.0.0","webpack":">=4.43.0 <6.0.0","webpack-dev-server":"3.x || 4.x","webpack-hot-middleware":"2.x","webpack-plugin-serve":"0.x || 1.x"},"peerDependenciesMeta":{"@types/webpack":{"optional":true},"sockjs-client":{"optional":true},"type-fest":{"optional":true},"webpack-dev-server":{"optional":true},"webpack-hot-middleware":{"optional":true},"webpack-plugin-serve":{"optional":true}},"resolutions":{"type-fest":"3.0.0"},"engines":{"node":">= 10.13"},"scripts":{"test":"run-s -c test:pre \"test:exec {@}\" test:post --","test:webpack-4":"cross-env WEBPACK_VERSION=4 yarn test","test:pre":"run-s yalc:publish yalc:add","test:exec":"node scripts/test.js","test:post":"yarn yalc:clean","yalc:add":"yalc add --dev @pmmmwh/react-refresh-webpack-plugin","yalc:clean":"yalc remove --all","yalc:publish":"yalc publish --no-scripts","lint":"eslint --report-unused-disable-directives --ext .js,.jsx .","lint:fix":"yarn lint --fix","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"","format:check":"prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\"","types:clean":"rimraf types","types:compile":"tsc -p tsconfig.json","types:prune-private":"del \"types/*/*\" \"!types/{lib,loader,options}/{index,types}.d.ts\"","generate-types":"run-s types:clean types:compile types:prune-private \"format --loglevel silent\""},"_resolved":"","_integrity":"","_from":"file:modern-js-react-refresh-webpack-plugin-0.5.8.tgz","_id":"@modern-js/react-refresh-webpack-plugin@0.5.8","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"shasum":"8cb867c22170c1ab9b08d89d19bd7b55894f6e4f","size":35858,"noattachment":false,"key":"/@modern-js/react-refresh-webpack-plugin/-/@modern-js/react-refresh-webpack-plugin-0.5.8.tgz","tarball":"http://registry.cnpm.dingdandao.com/@modern-js/react-refresh-webpack-plugin/download/@modern-js/react-refresh-webpack-plugin-0.5.8.tgz"},"_npmUser":{"name":"chenjiahan","email":"416417567@163.com"},"directories":{},"maintainers":[{"name":"bytednpm","email":""},{"name":"caohuilin","email":""},{"name":"chenjiahan","email":""},{"name":"derozan","email":""},{"name":"jingkai.zhao","email":""},{"name":"jserfeng","email":""},{"name":"kky_kongjiacong","email":""},{"name":"sanyuan0704","email":""},{"name":"shawzhou","email":""},{"name":"targeral","email":""},{"name":"webinfrabot","email":""},{"name":"xieqixuan.xx","email":""},{"name":"xuchaobei","email":""},{"name":"yimingjfe","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-refresh-webpack-plugin_0.5.8_1665210075303_0.6686347228371916"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-10-08T06:21:23.974Z","publish_time":1665210075489,"_cnpm_publish_time":1665210075489}},"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","_attachments":{},"homepage":"https://github.com/pmmmwh/react-refresh-webpack-plugin#readme","bugs":{"url":"https://github.com/pmmmwh/react-refresh-webpack-plugin/issues"},"license":"MIT"}