反应热载入程序没有更新更改

我使用react-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'))

来源

2016-11-28 milan

https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#the-following-modules-couldnt-be-hot - 更新 - 他们-潜在需求 - 一个全重装 – Izhaki

对于反应热装载机V3则需要明确使用的WebPack的热模块更换API如文档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') 
    ); 
    }); 
}

来源

2017-07-24 15:12:40 Brent

反应热载入程序没有更新更改

回答

相关问题