【问题标题】：React Hot loader 3 with webpack-dev使用 webpack-dev 反应热加载器 3
【发布时间】：2016-09-24 19:07:38
【问题描述】：

我正在尝试在我的项目中使用 hot-react-loader。因此，我更改了一些文件以使用它，但在编辑组件时出现错误。

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 ReactClass（用于复合组件）。

[HMR] 无法应用更新。需要重新加载！

我做错了什么？

webpack.config.dev.js

var webpack               = require('webpack');
var path                  = require('path');
// Questo il plugin di webpack che mi genera  il file index.html in dist
var HtmlwebpackPlugin     = require('html-webpack-plugin');


const PATHS = {
    app: path.join(__dirname, 'app/index'),
    build: path.join(__dirname, 'dist')
};

module.exports = {
  devtool: 'eval',
    entry: [
    'webpack-dev-server/client?http://localhost:3500',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    PATHS.app
  ],
    output: {
        path: PATHS.build,
        filename: 'js/bundle.js'
    },
    // Questo serve a non specificare le estensioni
    resolve: {
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            { test: /\.(png|jpg)$/, loader: "file?limit=1000&name=images/[hash].[ext]" },
            { test: /\.scss$/, loaders: [ 'style','css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] }
        ]
    },
    // Porta utilizzata da webpack-dev-server
    devServer: {
        port: 3500
    },
    plugins: [
    new webpack.HotModuleReplacementPlugin(),
        new HtmlwebpackPlugin({
            title: 'React Starter Kit',
            hash: true,
            inject: false,
            appMountId: 'app',
            template: 'jade!./app/assets/index.jade'
        })
    ]
};

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.dev');

new WebpackDevServer(webpack(config), {
  hot: true,
  historyApiFallback: true,
  stats: {
    colors: true
  }
}).listen(3500, 'localhost', function (err) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:3500');
});

index.js

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

const root = document.getElementById('app');

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>
  , root);

if (module.hot) {
  module.hot.accept('./app', () => {
    const App = require('./app');

    ReactDOM.render(
      <AppContainer>
        <App />
      </AppContainer>
    , root);
  });
}

app.js

import React from 'react';
import { Router, browserHistory } from 'react-router';
import routes from './routes/routes';

const App = () => (
    <Router history={browserHistory} routes={routes} />
);

export default App;

【问题讨论】：

当你尝试编辑时你在改变什么？
只有一个段落。这是我的仓库 --> github.com/sarovin/React-Starter/tree/hot-reload
至少你缺少 react-hot-loader
您需要共享 webpack.config.dev.js 文件，但您还需要一个 hack 来解决使用热加载程序 3 反应路由器的限制。
@JohnLeidegren 我已经用我的 webpack.config.dev.js 更新了问题。你能告诉我黑客吗？？？

标签： javascript reactjs webpack-dev-server react-hot-loader

【解决方案1】：

你必须修改Router组件本身的原型链来强制渲染新的东西。

// Router
import { Router, browserHistory } from 'react-router'

if (process.env.NODE_ENV === 'production') {
  // ...
} else {
  // the hacky workaround 
  Router.prototype.componentWillReceiveProps = function (nextProps) {
    let components = [];
    function grabComponents(routes) {
      routes.forEach((route) => {
        if (route.component) {
          components.push(route.component)
        }
        if (route.indexRoute && route.indexRoute.component) {
          components.push(route.indexRoute.component)
        }
        if (route.childRoutes) {
          grabComponents(route.childRoutes)
        }
      })
    }
    grabComponents(nextProps.routes)
    components.forEach(React.createElement) // force patching
  }
}

这里看到的代码是https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-211504531的改编

【讨论】：