Django и React Hot Module Reload?

Question

[Ник В]

Хай. Народ, подскажите где косяк? Прикрутил (мне так казалось) Hot Module Reload но он работает как-то 50 на 50. При внесении изменений в файл App.tsx страница в браузере обновляется, при изменении index.tsx (изменяю значение name) говорит 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'a и сервера:

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')
});

Как добится полной перезаргузки?

Answer 1

[Максим]

Может быть ваш файл index.tsx не лежит внутри
path.join(__dirname, 'client')
?
В противном случае, попробуйте создать что-нибудь на одном уровне с app.tsx, подключить это внутри app и поизменять. В целом, судя по вашему конфигу, я проблем не вижу.

Comments

[Ник В]

index.tsx находится внутри директории client/ Сделал как вы предложили. Создать что-нибудь на одном уровне с app.tsx, подключил это внутри app и поизменял. Меняется. Но если что то в index.tsx поизменять то ничего не происходит.