react-hot-loader配置錯誤：未更新組件更改時的瀏覽器

Question

我使用rect-redux-universal-hot-example作爲使用ReactJs的同構應用程序加載器的基礎。

我正在使用react-hot-loader和this migration guide刪除已棄用的hmr react-transform。

我做了下面的配置，但我的瀏覽器頁面沒有被自動重新加載，一旦我改變了一些應用程序組件數據。在控制檯或瀏覽器上都沒有錯誤。

這裏是我的設置：

.babelrc

{ 
    "presets": ["react", "es2015", "stage-0"], 

    "plugins": [ 
    "transform-runtime", 
    "add-module-exports", 
    "transform-react-display-name", 
    "flow-runtime", 
    "react-hot-loader/babel" 
    ] 
} 

client.js

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

const dest = document.getElementById('content'); 

const render = Component => { 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    document.getElementById('root') 
) 
} 

render(App) 

if (module.hot) { 
    module.hot.accept('./component/App',() => { render(App) }) 
} 

dev.config

require('babel-polyfill'); 

// Webpack config for development 
var fs = require('fs'); 
var path = require('path'); 
var webpack = require('webpack'); 
var assetsPath = path.resolve(__dirname, '../static/dist'); 
var host = (process.env.HOST || 'localhost'); 
var port = (+process.env.PORT + 1) || 3001; 

// https://github.com/halt-hammerzeit/webpack-isomorphic-tools 
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin'); 
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools')); 

module.exports = { 
    devtool: 'inline-source-map', 
    context: path.resolve(__dirname, '..'), 
    entry: { 
    'main': [ 
     'react-hot-loader/patch', 
     './src/client.js' 
    ] 
    }, 
    output: { 
    path: assetsPath, 
    filename: '[name]-[hash].js', 
    chunkFilename: '[name]-[chunkhash].js', 
    publicPath: 'http://' + host + ':' + port + '/dist/' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader', 'eslint-loader']}, 
     { test: /\.json$/, loader: 'json-loader' }, 
     { test: /\.less$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' }, 
     { test: /\.scss$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }, 
     { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }, 
     { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' } 
    ] 
    }, 
    resolve: { 
    modules: [ 
     'src', 
     'node_modules' 
    ], 
    extensions: ['*', '.json', '.js', '.jsx'] 
    }, 
    plugins: [ 
    // hot reload 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.IgnorePlugin(/webpack-stats\.json$/), 
    new webpack.DefinePlugin({ 
     __CLIENT__: true, 
     __SERVER__: false, 
     __DEVELOPMENT__: true, 
     __DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE 
    }), 
    webpackIsomorphicToolsPlugin.development() 
    ] 
}; 

我很確定我的設置有問題，但我找不到。幫助讚賞。

Answer 1

我想你在這裏失去了一些東西：

在你dev.config.js，您還需要webpack-hot-middleware/client在你的主入口。

在你client.js：

import ReactDOM from 'react-dom'; 
import React from 'react'; 
import { AppContainer } from 'react-hot-loader' 

// this import path doesn't match import path below 
import App from './component/App/app'; 

const dest = document.getElementById('content'); 

const render = Component => { 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    document.getElementById('root') 
) 
} 

render(App) 

if (module.hot) { 
    // Are you sure this is your correct path? This 
    // doesn't match the import path above. 
    module.hot.accept('./containers/App',() => { 
    // import App 
    const NextApp = require('./containers/App').default; 
    render(NextApp); 
    }) 
} 

更多的參考，你可以檢出該thread