Django and React Hot Module Reload?

Question

Django

Hai. People, tell me where the jamb? I screwed (it seemed to me) Hot Module Reload but it works somehow 50 to 50. When changes are made to the App.tsx file, the page in the browser is updated, when index.tsx is changed (I change the name value ) it says The following modules couldn't be hot updated: (They would need a full reload!)

App.tsx

import * as React from "react";

export interface AppProps {
    name: string;
}

export class App extends React.Component<AppProps, {}> {

    render() {
        return (
            <div>Hello {this.props.name}</div>
        )
    }
}

console (change app.tsx)

[HMR] Waiting for update signal from WDS...
client?4854:22  [WDS] Hot Module Replacement enabled.
client?4854:25 2[WDS] App updated. Recompiling...
client?4854:90  [WDS] App hot update...
only-dev-server.js?2f87:69  [HMR] Checking for updates on the server...
log-apply-result.js?d762:11 [HMR] The following modules couldnt be hot updated: (They would need a full reload!)
log-apply-result.js?d762:13 [HMR]  - 76
log-apply-result.js?d762:20 [HMR] Updated modules:
log-apply-result.js?d762:22 [HMR]  - 260
only-dev-server.js?2f87:55  [HMR] App is up to date.

index.tsx

import * as React from "react";
import {render} from "react-dom";
import {App} from "./components/App";


render(
    <App name='World!'/>, document.getElementById('root')
);

console (change index.tsx)

[WDS] App updated. Recompiling...
client?4854:90 [WDS] App hot update...
only-dev-server.js?2f87:69  [HMR] Checking for updates on the server...
log-apply-result.js?d762:11 [HMR] The following modules couldnt be hot updated: (They would need a full reload!)
log-apply-result.js?d762:13 [HMR]  - 76
log-apply-result.js?d762:18 [HMR] Nothing hot updated.
only-dev-server.js?2f87:55  [HMR] App is up to date.

webpack and server files:

webpack

import path from "path";
import webpack from "webpack";

export default {
    context: __dirname,
    devtool: 'eval-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:3000',
        'webpack/hot/only-dev-server',
        './client/index'
    ],
    output: {
        path: path.resolve('./src/static/js/'),
        filename: '[name].js',
        publicPath: 'http://127.0.0.1:3000/static/js/'
    },

    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),

    ],
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                include: path.join(__dirname, 'client'),
                loaders: ['react-hot', 'ts-loader']
            }
        ],

        preLoaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'source-map-loader'
            }
        ]
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    }
};

server

import webpack from "webpack";
import WebpackDevServer from "webpack-dev-server";
import config from "./webpack.config.babel";

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
    if (err) {
        console.log(err)
    }

    console.log('Listening at 0.0.0.0:3000')
});

How to achieve a complete reboot?

Answer 1

Maybe your index.tsx file is not inside
?
Otherwise, try to create something at the same level as app.tsx, include it inside the app and change it. In general, judging by your config, I don't see any problems.