{"id":13433444,"url":"https://github.com/pmmmwh/react-refresh-webpack-plugin","last_synced_at":"2025-05-13T16:05:41.289Z","repository":{"id":37430826,"uuid":"208149362","full_name":"pmmmwh/react-refresh-webpack-plugin","owner":"pmmmwh","description":"A Webpack plugin to enable \"Fast Refresh\" (also previously known as Hot Reloading) for React components.","archived":false,"fork":false,"pushed_at":"2025-04-30T10:01:25.000Z","size":6032,"stargazers_count":3177,"open_issues_count":46,"forks_count":198,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-06T16:07:38.439Z","etag":null,"topics":["error-overlay","fast-refresh","hot-reload","react","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmmmwh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-09-12T21:27:04.000Z","updated_at":"2025-05-05T02:27:25.000Z","dependencies_parsed_at":"2023-02-08T06:15:25.052Z","dependency_job_id":"46076c95-068d-425a-a8f4-ed57ebe53972","html_url":"https://github.com/pmmmwh/react-refresh-webpack-plugin","commit_stats":{"total_commits":808,"total_committers":49,"mean_commits":"16.489795918367346","dds":0.3081683168316832,"last_synced_commit":"0bbb6828deb3ef2a00a81ad9f87b64b4b83f8803"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-refresh-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-refresh-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-refresh-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmmmwh%2Freact-refresh-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmmmwh","download_url":"https://codeload.github.com/pmmmwh/react-refresh-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252933826,"owners_count":21827594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["error-overlay","fast-refresh","hot-reload","react","webpack-plugin"],"created_at":"2024-07-31T02:01:25.940Z","updated_at":"2025-05-13T16:05:41.080Z","avatar_url":"https://github.com/pmmmwh.png","language":"JavaScript","readme":"# React Refresh Webpack Plugin\n\n[actions]: https://github.com/pmmmwh/react-refresh-webpack-plugin/actions/workflows/ci.yml\n[actions:badge]: https://img.shields.io/github/actions/workflow/status/pmmmwh/react-refresh-webpack-plugin/ci.yml?branch=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[![GitHub Actions][actions:badge]][actions]\n[![License][license:badge]](./LICENSE)\n[![Latest Version][npm:latest:badge]][npm:latest]\n[![Next Version][npm:next:badge]][npm:next]\n\nA Webpack plugin to enable \"Fast Refresh\" (also known as _Hot Reloading_) for React components.\n\n\u003e 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| `Node.js`       | `18.12.0`+, `20.x`, `22.x`           |\n| `react`         | `16.13.0`+, `17.x`, `18.x` or `19.x` |\n| `react-dom`     | `16.13.0`+, `17.x`, `18.x` or `19.x  |\n| `react-refresh` | `0.10.0`+                            |\n| `webpack`       | `5.2.0`+                             |\n\n\u003cdetails\u003e\n\u003csummary\u003eMinimum requirements\u003c/summary\u003e\n\u003cbr /\u003e\n\n| Dependency      | Version   |\n| --------------- | --------- |\n| `Node.js`       | `18.12.0` |\n| `react`         | `16.9.0`  |\n| `react-dom`     | `16.9.0`  |\n| `react-refresh` | `0.10.0`  |\n| `webpack`       | `5.2.0`   |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eUsing custom renderers (e.g. \u003ccode\u003ereact-three-fiber\u003c/code\u003e, \u003ccode\u003ereact-pdf\u003c/code\u003e, \u003ccode\u003eink\u003c/code\u003e)\u003c/summary\u003e\n\u003cbr /\u003e\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\u003c/details\u003e\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\u003cdetails\u003e\n\u003csummary\u003eSupport for TypeScript\u003c/summary\u003e\n\u003cbr /\u003e\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\u003e **:memo: Note**:\n\u003e\n\u003e `type-fest@4.x` only supports Node.js v16 or above,\n\u003e `type-fest@3.x` only supports Node.js v14.16 or above,\n\u003e and `type-fest@2.x` only supports Node.js v12.20 or above.\n\u003e If you're using an older version of Node.js, please install `type-fest@1.x`.\n\n\u003c/details\u003e\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\u003cdetails\u003e\n\u003csummary\u003eUsing \u003ccode\u003ewebpack-hot-middleware\u003c/code\u003e\u003c/summary\u003e\n\u003cbr /\u003e\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 \u0026\u0026 new webpack.HotModuleReplacementPlugin()].filter(Boolean),\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eUsing \u003ccode\u003ewebpack-plugin-serve\u003c/code\u003e\u003c/summary\u003e\n\u003cbr /\u003e\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 \u0026\u0026 new WebpackPluginServe()].filter(Boolean),\n};\n```\n\n\u003c/details\u003e\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 \u0026\u0026 require.resolve('react-refresh/babel')].filter(Boolean),\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [isDevelopment \u0026\u0026 new ReactRefreshWebpackPlugin()].filter(Boolean),\n};\n```\n\n\u003e **:memo: Note**:\n\u003e\n\u003e Ensure both the Babel transform (`react-refresh/babel`) and this plugin are enabled only in `development` mode!\n\n\u003cdetails\u003e\n\u003csummary\u003eUsing \u003ccode\u003ets-loader\u003c/code\u003e\u003c/summary\u003e\n\u003cbr /\u003e\n\n\u003e **:warning: Warning**:\n\u003e 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: () =\u003e ({\n                before: [isDevelopment \u0026\u0026 ReactRefreshTypeScript()].filter(Boolean),\n              }),\n              transpileOnly: isDevelopment,\n            },\n          },\n        ],\n      },\n    ],\n  },\n  plugins: [isDevelopment \u0026\u0026 new ReactRefreshWebpackPlugin()].filter(Boolean),\n};\n```\n\n\u003e It is recommended to run `ts-loader` with `transpileOnly` is set to `true`.\n\u003e You can use `ForkTsCheckerWebpackPlugin` as an alternative if you need typechecking during development.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eUsing \u003ccode\u003eswc-loader\u003c/code\u003e\u003c/summary\u003e\n\u003cbr /\u003e\n\n\u003e **:warning: Warning**:\n\u003e 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 \u0026\u0026 new ReactRefreshWebpackPlugin()].filter(Boolean),\n};\n```\n\n\u003e Starting from version `0.1.13`, `swc-loader` will set the `development` option based on Webpack's `mode` option.\n\u003e `swc` won't enable fast refresh when `development` is `false`.\n\n\u003c/details\u003e\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`     | `4.8.0`+ or `5.x` |\n| `webpack-hot-middleware` | `2.x`             |\n| `webpack-plugin-serve`   | `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\u003ca href=\"https://jb.gg/OpenSource?from=ReactRefreshWebpackPlugin\" target=\"_blank\"\u003e\n  \u003cimg\n    alt=\"JetBrains Logo\"\n    src=\"https://user-images.githubusercontent.com/9338255/132110580-61d3dba5-f5c7-4479-bd8e-39cd65b42fc5.png\"\n    width=\"120\"\n  /\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmmmwh%2Freact-refresh-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmmmwh%2Freact-refresh-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmmmwh%2Freact-refresh-webpack-plugin/lists"}