Webpack5 + react-refresh-webpack-plugin: Why it doesn’t work?

What is react-refresh-webpack-plugin?

The react-refresh-webpack-plugin is a Webpack plugin that enables hot module replacement (HMR) for React components. It allows developers to see the changes they make to their React components in real-time without having to manually refresh the browser. This plugin is especially useful during development, as it improves productivity by reducing the time spent on manual browser refreshes.

The Problem

When using Webpack 5 with the react-refresh-webpack-plugin, some developers have reported that the hot module replacement feature doesn’t work as expected. The changes made to React components are not reflected in the browser, even though the plugin is correctly configured.

The Solution

After investigating the issue, it was found that there is a specific configuration required to make the react-refresh-webpack-plugin work correctly with Webpack 5. The solution involves making amendments to the optimization and entry sections of the Webpack configuration.

Here is an example of the modified Webpack configuration:

const path = require('path');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const SRC = path.join(__dirname, '..', 'src');
const DIST = path.join(__dirname, '..', 'dist');
const PUBLIC = path.join(__dirname, '..', 'public');

module.exports = (env) => {
  return {
    mode: 'development',
    entry: {
      reactRefreshSetup: '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
      main: path.join(SRC, 'index.tsx'),
    },
    output: {
      filename: '[name].js',
      path: DIST,
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          include: SRC,
          use: 'babel-loader',
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: './index.html',
        template: path.join(PUBLIC, 'index.html'),
      }),
      new ReactRefreshPlugin(),
    ],
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  };
};

In addition to the above configuration, you also need to modify the devServer and optimization sections:

module.exports = (env) => {
  return {
    devServer: {
      hot: true,
      port: 8080,
    },
    plugins: [
      new ReactRefreshPlugin(),
    ],
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        name(_, __, cacheGroupKey) {
          return cacheGroupKey;
        },
      },
    },
  };
};

By making these amendments to the Webpack configuration, the react-refresh-webpack-plugin should work correctly with Webpack 5. The hot module replacement feature will now reflect the changes made to React components in real-time without the need for manual browser refreshes.

Conclusion

In this article, we explored the issue of the react-refresh-webpack-plugin not working correctly with Webpack 5. We provided a solution by making specific amendments to the Webpack configuration. By following the steps outlined in this article, developers can ensure that the hot module replacement feature works as expected when using Webpack 5 with the react-refresh-webpack-plugin.

Related Posts

How to Post an Empty Body to REST API via HttpClient in C When working with REST APIs in C#, you may come across scenarios where you need to send a POST request with an empty body. This can be useful in situations where the API endpoint expects a POST request but doesn’t require any ...

Read more

Does C# have IsNullOrEmpty for List/IEnumerable?

If you’ve been working with C# for a while, you may have come across situations where you need to check if a List or IEnumerable is null or empty. In some other languages, like JavaScript, you have the convenience of using the Array.isArray() method or the length property to check if an array is empty ...

Read more

List Queries: 20 Times Faster than IQueryable?

Have you ever wondered why list queries are often faster than IQueryable queries in C#? In this article, we will explore the reasons behind this performance difference and discuss when and how to use each type of query. What is IQueryable? Before we dive into the performance comparison, let’s first understand what IQueryable is. IQueryable ...

Read more

Passing Different Number of Arguments to a Params Method at Runtime

How to Pass a Different Number of Arguments Using a List and Converting to an Array One way to pass a different number of arguments to a params method at runtime is by using a List<object> to store the arguments and then converting it to an array using the ToArray() method. Here’s an example: List<object> ...

Read more

Leave a Comment