webpack-dev-server HMR реагирует на многоуровневый глубокий импорт, не обнаруживая изменений

Question

У меня есть webpack-dev-server для REACT. Я заметил проблему с прикреплением файлов на многих уровнях. Если я включаю файл с 3-го уровня и обновляю их, веб-пакет не обнаруживает эти изменения и не обновляет sh компонент.

Для файла прикрепления я использую следующий синтаксис: import MUItable from "./elements/table";

Как решить эту проблему? Я присоединяю свою конфигурацию веб-пакета, дерево каталогов.

webpack.config. js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssoWebpackPlugin = require('csso-webpack-plugin').default;
const path = require('path');
const webpack = require('webpack');

var SRC = path.resolve(__dirname, 'files');

module.exports = (env, argv) => ({
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: argv.mode === 'development',
                        },
                    },
                    'css-loader',
                ],
            },       
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                            test: /\.(jpe?g|png|gif|mp3)$/i,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: (argv.mode === 'development')?'[name].css':'[chunkhash].css',
            ignoreOrder: false,
        }),
        new CopyPlugin([
            { from: './src/images', to: './images' }
        ]),
        //new CssoWebpackPlugin(),
    ],
    output: {
        filename: (argv.mode === 'development')?'[name].js':'[chunkhash].js',
        path: path.resolve(__dirname, 'build'),
        publicPath: "/",
    },
    optimization: {
        minimize: argv.mode !== 'development',
        splitChunks: {
            chunks: 'all',
        },
    },
    watch: true,
    cache: false,
    devServer: {
    publicPath: "/",
    contentBase: path.join(__dirname, "build"),
    https: true,
    port: 65237,
    writeToDisk: true,
    sockPort: 443,
    sockHost: 'example.com',
    inline: true,
    progress: true,
    historyApiFallback: true,
    hot: true,
    host: '0.0.0.0',
    disableHostCheck: true,
    overlay: true,
    }
});

Дерево каталогов:

src
 |-- index.js
 |-- pages
     |-- main.js
     |-- base
         |-- system.js
         |-- elements //- from this level webpack don't refresh components after update
             |-- table.js
             |-- button.js