docs: update import for React Refresh plugin (#13632)

chenjiahan · web-flow · commit f15f7f407eb5 · 2026-04-07T21:52:14.000+08:00
* docs: update import for React Refresh plugin

* fix: update React Refresh plugin import
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -106,7 +106,6 @@ Rstack 是一个以 Rspack 为核心的 JavaScript 统一工具链，具有优
 - `rolldown-legacy` 项目，它是 [rolldown](https://github.com/rolldown) 项目的前身，它探索了使用 Rust 构建高性能 Bundler + 兼容 Rollup API 的可能性，启发了 Rspack 的设计方向。
 - [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 项目（由 [@jantimon](https://github.com/jantimon) 创建），Rspack 的 `@rspack/html-plugin` 是 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的一个 fork 来避免使用在 Rspack 中尚未支持的 webpack API。
 - [Turbopack](https://github.com/vercel/turbo) 项目，它启发了 Rspack 里基于 AST 的路径重写逻辑。
-- [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) 项目（由 [@pmmmwh](https://github.com/pmmmwh) 创建），它启发了 Rspack 内的 ReactRefreshPlugin 实现。
 - [prefresh](https://github.com/preactjs/prefresh) 项目（由 [@Jovi De Croock](https://github.com/JoviDeCroock) 创建），它启发了 Rspack 内的 PreactRefreshPlugin 实现。
 - [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) 项目（由 [@sokra](https://github.com/sokra) 创建），它启发了 Rspack 内的 CssExtractPlugin 实现。
 - [copy-webpack-plugin](https://github.com/webpack/copy-webpack-plugin) 项目（由 [@kevlened](https://github.com/kevlened) 创建），它启发了 Rspack 内的 CopyPlugin 实现。
diff --git a/tests/e2e/cases/chunk/recover-error/rspack.config.js b/tests/e2e/cases/chunk/recover-error/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 module.exports = {
   mode: 'development',
@@ -40,7 +40,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   optimization: {
     runtimeChunk: {
diff --git a/tests/e2e/cases/lazy-compilation/module-federation/rspack.config.js b/tests/e2e/cases/lazy-compilation/module-federation/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type { import('@rspack/core').RspackOptions } */
 module.exports = {
@@ -52,7 +52,7 @@ module.exports = {
       },
       runtimePlugins: [require.resolve('./runtime-plugin.js')],
     }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   lazyCompilation: true,
   devServer: {
diff --git a/tests/e2e/cases/module-federation/container-entry-split-chunks/rspack.config.js b/tests/e2e/cases/module-federation/container-entry-split-chunks/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type { import('@rspack/core').RspackOptions } */
 module.exports = {
@@ -45,7 +45,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
     function (compiler) {
       new rspack.container.ModuleFederationPluginV1({
         name: 'remote',
diff --git a/tests/e2e/cases/react/basic/rspack.config.js b/tests/e2e/cases/react/basic/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type { import('@rspack/core').RspackOptions } */
 module.exports = {
@@ -40,7 +40,7 @@ module.exports = {
   devtool: false,
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   entry: './src/index.jsx',
   devServer: {
diff --git a/tests/e2e/cases/react/class-component/rspack.config.js b/tests/e2e/cases/react/class-component/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type { import('@rspack/core').RspackOptions } */
 module.exports = {
@@ -40,7 +40,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   devServer: {
     hot: true,
diff --git a/tests/e2e/cases/react/tailwindcss-with-css-extract/rspack.config.js b/tests/e2e/cases/react/tailwindcss-with-css-extract/rspack.config.js
@@ -1,6 +1,6 @@
 const path = require('node:path');
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 module.exports = {
   context: __dirname,
@@ -10,7 +10,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
     new rspack.CssExtractRspackPlugin(),
   ],
   resolve: {
diff --git a/tests/e2e/cases/react/tailwindcss/rspack.config.js b/tests/e2e/cases/react/tailwindcss/rspack.config.js
@@ -1,6 +1,6 @@
 const path = require('node:path');
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 module.exports = {
   context: __dirname,
@@ -10,7 +10,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
diff --git a/tests/e2e/cases/react/with-babel/rspack.config.js b/tests/e2e/cases/react/with-babel/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type { import('@rspack/core').RspackOptions } */
 module.exports = {
@@ -49,7 +49,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   entry: './src/index.jsx',
   devServer: {
diff --git a/tests/e2e/cases/react/worker/rspack.config.js b/tests/e2e/cases/react/worker/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type { import('@rspack/core').RspackOptions } */
 module.exports = {
@@ -40,7 +40,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
   ],
   devServer: {
     hot: true,
diff --git a/tests/rspack-test/configCases/builtin-swc-loader/react-refresh/rspack.config.js b/tests/rspack-test/configCases/builtin-swc-loader/react-refresh/rspack.config.js
@@ -1,5 +1,5 @@
 const { rspack } = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 /** @type {import("@rspack/core").Configuration} */
 module.exports = {
   entry: './index.jsx',
@@ -35,7 +35,7 @@ module.exports = {
   },
   plugins: [
     new rspack.HotModuleReplacementPlugin(),
-    new ReactRefreshPlugin(),
+    new ReactRefreshRspackPlugin(),
     new rspack.DefinePlugin({
       STUB: JSON.stringify('<div></div>'),
     }),
diff --git a/tests/rspack-test/watchCases/chunks/mf-hoisting-multi-entries/rspack.config.js b/tests/rspack-test/watchCases/chunks/mf-hoisting-multi-entries/rspack.config.js
@@ -1,5 +1,5 @@
 const rspack = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type {import("@rspack/core").Configuration} */
 module.exports = {
@@ -57,6 +57,6 @@ module.exports = {
       name: 'test',
       shareStrategy: 'loaded-first',
     }),
-    new ReactRefreshPlugin(), // Need this to trigger hoisting (hoist_container_references_plugin.rs)
+    new ReactRefreshRspackPlugin(), // Need this to trigger hoisting (hoist_container_references_plugin.rs)
   ],
 };
diff --git a/tests/rspack-test/watchCases/chunks/mf-hoisting/rspack.config.js b/tests/rspack-test/watchCases/chunks/mf-hoisting/rspack.config.js
@@ -1,5 +1,5 @@
 const rspack = require('@rspack/core');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const { ReactRefreshRspackPlugin } = require('@rspack/plugin-react-refresh');
 
 /** @type {import("@rspack/core").Configuration} */
 module.exports = {
@@ -9,6 +9,6 @@ module.exports = {
       name: 'test',
       shareStrategy: 'loaded-first',
     }),
-    new ReactRefreshPlugin(), // Need this to trigger hoisting (hoist_container_references_plugin.rs)
+    new ReactRefreshRspackPlugin(), // Need this to trigger hoisting (hoist_container_references_plugin.rs)
   ],
 };
diff --git a/website/docs/en/blog/announcing-0-4.mdx b/website/docs/en/blog/announcing-0-4.mdx
@@ -120,7 +120,7 @@ Check out our previous discussion [here](https://github.com/web-infra-dev/rspack
 With `experiments.rspackFuture.disableTransformByDefault` is enabled by default in v0.4.0, `builtin.react.refresh` has also been deprecated. Now we recommend using `@rspack/plugin-react-refresh` to enable react fast refresh.
 
 ```diff title="rspack.config.mjs"
-+ import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
++ import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -156,7 +156,7 @@ export default {
 -    }
 -  },
   plugins: [
-+    isDev && new ReactRefreshPlugin()
++    isDev && new ReactRefreshRspackPlugin()
   ],
 };
 ```
diff --git a/website/docs/en/guide/tech/react.mdx b/website/docs/en/guide/tech/react.mdx
@@ -76,7 +76,7 @@ Enabling [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) functio
 
 ```js title="rspack.config.mjs"
 import { rspack } from '@rspack/core';
-import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -107,7 +107,7 @@ export default {
     ],
   },
   plugins: [
-    isDev && new ReactRefreshPlugin(),
+    isDev && new ReactRefreshRspackPlugin(),
     isDev && new rspack.HotModuleReplacementPlugin(),
   ],
 };
diff --git a/website/docs/zh/blog/announcing-0-4.mdx b/website/docs/zh/blog/announcing-0-4.mdx
@@ -104,7 +104,7 @@ export default {
 由于在 v0.4.0 中默认启用了 `experiments.rspackFuture.disableTransformByDefault`，`builtin.react.refresh` 也已被废弃。现在我们建议使用 `@rspack/plugin-react-refresh` 来启用 React Fast Refresh。你需要手动安装 [@rspack/plugin-react-refresh](https://www.npmjs.com/package/@rspack/plugin-react-refresh) 和 [react-refresh](https://www.npmjs.com/package/react-refresh)。
 
 ```diff title="rspack.config.mjs"
-+ import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
++ import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -140,7 +140,7 @@ export default {
 -    }
 -  },
   plugins: [
-+    isDev && new ReactRefreshPlugin()
++    isDev && new ReactRefreshRspackPlugin()
   ],
 };
 ```
diff --git a/website/docs/zh/guide/tech/react.mdx b/website/docs/zh/guide/tech/react.mdx
@@ -74,7 +74,7 @@ export default {
 
 ```js title="rspack.config.mjs"
 import { rspack } from '@rspack/core';
-import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -105,7 +105,7 @@ export default {
     ],
   },
   plugins: [
-    isDev && new ReactRefreshPlugin(),
+    isDev && new ReactRefreshRspackPlugin(),
     isDev && new rspack.HotModuleReplacementPlugin(),
   ],
 };
