react-hot-loader configuration error: not updating the browser on component change

Question

我使用 rect-redux-universal-hot-example 作为我使用 ReactJs 的同构应用程序加载器的基础。

我正在使用 react-hot-loader 并关注 this migration guide to remove the deprecated 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

react-hot-loader configuration error: not updating the browser on component change

react-hot-loader configuration error: not updating the browser on component change

javascript

reactjs

react-hot-loader