反応ホットローダーの設定エラー：コンポーネントの変更時にブラウザを更新しない

Question

私はReactJを使用して同形アプリローダーのベースとしてrect-redux-universal-hot-exampleを使用しています。

私はリアクションホットローダーを使用し、this migration guideに続いて廃止予定のhmr react-transformを削除しています。

私は以下の設定を行いましたが、一部のAppコンポーネントデータを変更するとブラウザのページが自動的にリロードされません。コンソールまたはブラウザーのどちらにもエラーはありません。ここで

は私の設定です：

.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