реагировать на горячий загрузчик, не обновляя изменения

Question

Я использую реактивный hot-loader v3, но он не работает. Он ожидает обновления на сервере, но не показывают изменения вместо того, чтобы я получить предупреждение, как

журнал применить-result.js d762: 11 [HMR] Следующие модули могут не быть горячим обновление: (Они должны были бы полную перезагрузку!)

Ниже моя конфигурация WebPack

webpack.local.config.js

var path = require("path") 
var webpack = require('webpack') 
var BundleTracker = require('webpack-bundle-tracker') 

var config = require('./webpack.base.config.js') 
var localSettings = require('./webpack.local-settings.js') 

var ip = localSettings.ip 

config.devtool = "#eval-source-map" 

config.ip = ip 

// Use webpack dev server 
config.entry = { 
    App: [ 
    'webpack-dev-server/client?http://' + ip + ':3000', 
    'webpack/hot/only-dev-server', 
    'react-hot-loader/patch', 
    './reactjs/App', 
    ] 
} 

// override django's STATIC_URL for webpack bundles 
config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/' 

// Add HotModuleReplacementPlugin and BundleTracker plugins 
config.plugins = config.plugins.concat([ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new BundleTracker({filename: './webpack-stats-local.json'}), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify('development'), 
     'BASE_API_URL': JSON.stringify('http://' + ip + ':8000/api/v1/'), 
    }}), 

]) 

// Add a loader for JSX files with react-hot enabled 
config.module.loaders.push(
    { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] } 
) 

module.exports = config 

server.js

var webpack = require('webpack') 
var WebpackDevServer = require('webpack-dev-server') 
var config = require('./webpack.local.config') 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    inline: true, 
    historyApiFallback: true, 
    quiet: false, 
}).listen(3000, config.ip, function (err) { 
    if (err) { 
    console.log(err); 
    } 

    console.log('Listening at ' + config.ip + ':3000'); 
}); 

и мой .babelrc

{ 
    "presets": ["es2015", "react", "stage-0"], 
    "plugins": [ 
    ["react-hot-loader/babel", "transform-decorators-legacy"], 
    ] 
} 

"реагировать-хот-погрузчик": "^ 3.0.0-beta.6",

"webpack": "^ 1.13.3",

"WebPack-расслоением-трекер": "^ 0.1.0",

"WebPack-DEV-сервер": "^ 1.16.2",

"WebPack-погрузчик": "^ 0.0.1"

App.jsx

render(<Change />, document.getElementById('app')) 

Answer 1

для реакции-хот-погрузчик v3 вам нужно явно использовать горячую замену модуля апи из WebPack, как описано в документации here (также вывешенные Izhaki).

Например,

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 
import App from './containers/App' 

ReactDOM.render(
    <AppContainer> 
    <App/> 
    </AppContainer>, 
    document.getElementById('root') 
); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept('./containers/App',() => { 
    const NextApp = require('./containers/App').default; 
    ReactDOM.render(
     <AppContainer> 
     <NextApp/> 
     </AppContainer>, 
     document.getElementById('root') 
    ); 
    }); 
}