Problem

I am using webpack 5, React 18 and MobX stores. With my current configuration of webpack using HMR and ReactRefresh everything seems to be refreshing just fine, however we are using mobx stores deep in the project to render out some values. When we edit these values, webpack detect a change. But the store does not get re-initialized so the values stay the same until I refresh the whole page. I presume it’s a correct behaviour. So I came up with some solutin

Solution 1

Having a custom plugin that will force page reload a specific files are editted. I successfully made the plugin detect the changes but the forced reload does not work.

Solution 2

Ignoring specific files in the config, using exclude. This does not work at all it seems to be watched as usual.

Code

The config is devided to .dev and .prod part here is the dev part .common part has only aliases.

const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = merge(common, {
  entry: ['./src/index.js', './src/scss/styles.scss'],
  devtool: false,
  mode: 'development',
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].[contenthash:8].chunk.js',
    chunkFilename: '[id].[contenthash:8].chunk.js',
    publicPath: '/',
  },
  devServer: {
    static: path.join(__dirname, 'public'),
    port: '3000',
    open: false,
    hot: true,
    client: {
      overlay: false,
      logging: 'error',
    },
    historyApiFallback: true,
  },
  watchOptions: {
    ignored: /node_modules/,
  },
  module: {
    rules: [
      {
        test: /.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                ['@babel/preset-react', { runtime: 'automatic' }],
              ],
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: 'public/index.html',
      favicon: 'public/favicon.ico',
      manifest: 'public/manifest.json',
      reactAppMinioPath: process.env.REACT_APP_MINIO_PATH,
      publicUrl: process.env.PUBLIC_URL,
    }),
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
      exclude: 'node_modules',
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/scripts/',
          to: 'scripts/',
        },
      ],
    }),
    new ReactRefreshWebpackPlugin(),
    {
      apply: (compiler) => {
        compiler.hooks.watchRun.tap('FormattedNotifierPlugin', async () => {
          console.log(
            'x1b[34mFile change detected, starting recompilation... x1b[0m'
          );
        });
      },
    },
  ],
});

I cannot figure out what I am doing wrong, if this is a right approach or if I just missed something…