javascript - Webpack、Express、および Babel (babel-loader) を使用したホット モジュール交換が React コンポーネントで機能しない (エラー: 承認されていないモジュールへの更新は無視されました)

Question

私はReact webpackなどを初めて使用し、ホットモジュールの交換をワークフローに実装しようとしています。Reactでwebpack、express、Babel ES6を使用していますが、必要なローダーがすべて揃っていると思います。

CSS ファイルに対して HMR が機能しており、CSS を完全に更新しますが、何らかの理由で React コンポーネントを更新しようとすると、次のエラーが発生し、変更を確認するためにページを更新する必要があります。私は一日中苦労しているので、どんな助けも大いに受け取られるでしょう！私が得るエラーは次のとおりです（私のコードはその後に従います）：

>Ignored an update to unaccepted module 28 -> 17
>
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
>
[HMR]  - ./app/scripts/libs/index.js

index.js (エントリー)

import React from 'react';
import ReactDOM from 'react-dom';
import style from 'css/main.css';
import Sections from 'components/Sections/index.js';


ReactDOM.render(
    <div>
        <h2>Hek</h2> 
        <Sections></Sections>
    </div>, 

    document.getElementById('app')
)

console.log('check for me');

index.js (セクション コンポーネント)

import React from 'react';
import ReactDOM from 'react-dom';

export class Sections extends React.Component{
    render(){
        return(
            <div>
                <h1>Yo yo yo wahts</h1>
                <p>hlfgdfd</p>
            </div>
        )
    }
}

module.exports = Sections;

BuildScript.js 'use strict';

var express = require('express'); //get the express module
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

var app = express(); //create a new instance of that class
var config = require('../../../webpack.config.js');
var compiler = webpack(config);


app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, function () {
    // return console.log('Example app listening on port 3000!');
});

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: [ 'webpack-hot-middleware/client' , './app/scripts/libs/index.js'], //Can also use "main" property
    output: {
        path: path.resolve(__dirname, 'tmp'), //resolves the absolute path 
        filename: '[name].bundle.js', //
        publicPath: '/'
    },
    devtool: 'inline-source-map',
    resolve:{
        alias: {
            components: path.resolve(__dirname, 'app/scripts/components'),
            fonts: path.resolve(__dirname,  'app/scripts/fonts'),
            images: path.resolve(__dirname,  'app/images'),
            sass: path.resolve(__dirname,  'app/styles/sass'),
            css: path.resolve(__dirname,  'app/styles/css')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //to use the CSS imported - in your index.js file you 
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpg|png|svg|gif)$/,
                use:['file-loader']
            },            
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'react']
                }

            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'African Banker Awards 2018',
            template: './app/scripts/libs/template.ejs',
            inject: 'body'
        }), 
        new CleanWebpackPlugin(['tmp']),
        new webpack.HotModuleReplacementPlugin()
        //new UglifyJsPlugin()
    ]
  };

インストールされた NPM パッケージ

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "eslint": "^4.10.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "install": "^0.10.1",
    "npm": "^5.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.1.4",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.1",
    "webpack-hot-middleware": "^2.21.0"
  }
}