reagieren heißen Lader nicht die Änderungen aktualisieren

Question

Ich benutze reac-hot-loader v3, aber es funktioniert nicht. Es hört für das Update auf dem Server aber zeigen nicht die Änderungen stattdessen erhalte ich Warnung als

log-apply-result.js d762: 11 [HMR] Die folgenden Module nicht heiß werden aktualisiert: (Sie müssten eine vollständige reload!)

Unten ist mein webpack Konfiguration

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

und meine .babelrc

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

"reagieren Hot-loader": "^ 3.0.0-beta.6",

"webpack": "^ 1.13.3",

"Webpack-bundle-tracker": "^ 0.1.0"

"webpack-dev-Server": "^ 1.16.2"

"webpack-loader": "^ 0.0.1"

App.jsx

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

Answer 1

Für reagieren Hot-loader v3 explizit müssen, um das Hot-Module Ersatz api von webpack verwenden, wie in der Dokumentation beschrieben here (auch von Izhaki geschrieben).

Zum Beispiel

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