diff --git a/.changeset/fix-plugin-react-hmr-refresh.md b/.changeset/fix-plugin-react-hmr-refresh.md new file mode 100644 index 0000000000..6973b347e7 --- /dev/null +++ b/.changeset/fix-plugin-react-hmr-refresh.md @@ -0,0 +1,5 @@ +--- +"@lynx-js/react-rsbuild-plugin": patch +--- + +Respect `dev.hmr: false` when installing React Refresh integrations so disabled HMR no longer injects the refresh loader or plugin. diff --git a/packages/rspeedy/plugin-react/src/refresh.ts b/packages/rspeedy/plugin-react/src/refresh.ts index a440468d7e..9ba3abcba2 100644 --- a/packages/rspeedy/plugin-react/src/refresh.ts +++ b/packages/rspeedy/plugin-react/src/refresh.ts @@ -18,13 +18,13 @@ import { LAYERS } from '@lynx-js/react-webpack-plugin' const PLUGIN_NAME_REACT_REFRESH = 'lynx:react:refresh' export function applyRefresh(api: RsbuildPluginAPI): void { - api.modifyWebpackChain?.(async (chain, { CHAIN_ID, isProd }) => { - if (!isProd) { + api.modifyWebpackChain?.(async (chain, { CHAIN_ID, environment, isProd }) => { + if (!isProd && environment.config.dev?.hmr !== false) { await applyRefreshRules(api, chain, CHAIN_ID, ReactRefreshWebpackPlugin) } }) - api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => { - if (!isProd) { + api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID, environment }) => { + if (!isProd && environment.config.dev?.hmr !== false) { // biome-ignore lint/correctness/useHookAtTopLevel: not react hooks const { resolve } = api.useExposed< { resolve: (request: string) => Promise } diff --git a/packages/rspeedy/plugin-react/test/refresh.test.ts b/packages/rspeedy/plugin-react/test/refresh.test.ts index 859450a290..0db039b639 100644 --- a/packages/rspeedy/plugin-react/test/refresh.test.ts +++ b/packages/rspeedy/plugin-react/test/refresh.test.ts @@ -47,4 +47,45 @@ describe('pluginReactLynx with react-refresh', () => { ).toBe(true) expect(rspackConfig).toHaveLoader(ReactRefreshRspackPlugin.loader) }) + + test('does not inject refresh loader and plugin when hmr is disabled', async () => { + const { pluginReactLynx } = await import('../src/index.js') + const { ReactRefreshRspackPlugin } = await import( + '@lynx-js/react-refresh-webpack-plugin' + ) + + const rsbuild = await createRspeedy({ + rspeedyConfig: { + dev: { + hmr: false, + }, + tools: { + rspack: { + output: { + chunkFormat: 'commonjs', + }, + resolve: { + extensionAlias: { + '.js': ['.ts', '.js'], + }, + }, + }, + }, + plugins: [ + pluginReactLynx(), + pluginStubRspeedyAPI(), + ], + }, + }) + + const [rspackConfig] = await rsbuild.initConfigs() + + expect(rspackConfig?.mode).toBe('development') + expect( + rspackConfig?.plugins?.some(plugin => + plugin instanceof ReactRefreshRspackPlugin + ), + ).toBe(false) + expect(rspackConfig).not.toHaveLoader(ReactRefreshRspackPlugin.loader) + }) })