反応ホットローダー3とwebpack-dev

Question

私は自分のプロジェクトでホット反応ローダーを使用しようとしています。 これで動作するようにファイルを変更しましたが、コンポーネントを編集するとエラーが発生します。

警告：React.createElement：typeは、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; 

Answer 1

ルーターコンポーネントのプロトタイプチェーンを変更して、新しいものを強制的にレンダリングする必要があります。

// 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