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