To ensure full support of "Fast Refresh" with components rendered by custom renderers, you should ensure the renderer you're using depends on a recent version of react-reconciler.

We recommend version 0.25.0 or above, but any versions above 0.22.0 should work.

If the renderer is not compatible, please file them an issue instead.

TypeScript support is available out-of-the-box for those who use webpack.config.ts.

Our exported types however depends on type-fest, so you'll have to add it as a devDependency:

1# if you prefer npm
2npm install -D type-fest
3
4# if you prefer yarn
5yarn add -D type-fest
6
7# if you prefer pnpm
8pnpm add -D type-fest

:memo: Note:

type-fest@4.x only supports Node.js v16 or above, type-fest@3.x only supports Node.js v14.16 or above, and type-fest@2.x only supports Node.js v12.20 or above. If you're using an older version of Node.js, please install type-fest@1.x.

1const webpack = require('webpack');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),
8};

1const { WebpackPluginServe } = require('webpack-plugin-serve');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  plugins: [isDevelopment && new WebpackPluginServe()].filter(Boolean),
8};

:warning: Warning: This is an un-official integration maintained by the community.

Install react-refresh-typescript. Ensure your TypeScript version is at least 4.0.

1# if you prefer npm
2npm install -D react-refresh-typescript
3
4# if you prefer yarn
5yarn add -D react-refresh-typescript
6
7# if you prefer pnpm
8pnpm add -D react-refresh-typescript

Then, instead of wiring up react-refresh/babel via babel-loader, you can wire-up react-refresh-typescript with ts-loader:

1const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
2const ReactRefreshTypeScript = require('react-refresh-typescript');
3
4const isDevelopment = process.env.NODE_ENV !== 'production';
5
6module.exports = {
7  mode: isDevelopment ? 'development' : 'production',
8  module: {
9    rules: [
10      {
11        test: /\.[jt]sx?$/,
12        exclude: /node_modules/,
13        use: [
14          {
15            loader: require.resolve('ts-loader'),
16            options: {
17              getCustomTransformers: () => ({
18                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
19              }),
20              transpileOnly: isDevelopment,
21            },
22          },
23        ],
24      },
25    ],
26  },
27  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
28};

It is recommended to run ts-loader with transpileOnly is set to true. You can use ForkTsCheckerWebpackPlugin as an alternative if you need typechecking during development.

:warning: Warning: This is an un-official integration maintained by the community.

Ensure your @swc/core version is at least 1.2.86. It is also recommended to use swc-loader version 0.1.13 or above.

Then, instead of wiring up react-refresh/babel via babel-loader, you can wire-up swc-loader and use the refresh transform:

1const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
2
3const isDevelopment = process.env.NODE_ENV !== 'production';
4
5module.exports = {
6  mode: isDevelopment ? 'development' : 'production',
7  module: {
8    rules: [
9      {
10        test: /\.[jt]sx?$/,
11        exclude: /node_modules/,
12        use: [
13          {
14            loader: require.resolve('swc-loader'),
15            options: {
16              jsc: {
17                transform: {
18                  react: {
19                    development: isDevelopment,
20                    refresh: isDevelopment,
21                  },
22                },
23              },
24            },
25          },
26        ],
27      },
28    ],
29  },
30  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
31};

Starting from version 0.1.13, swc-loader will set the development option based on Webpack's mode option. swc won't enable fast refresh when development is false.