Реагировать Hot Reload 3

Question

Так что я пытался использовать Реагировать Hot Reload 3 - - активировать горячую перезагрузку в моем проекте, и я получаю сообщение об ошибке в настоящее время с React-маршрутизатор

[реагировать-маршрутизатор] Вы невозможно изменить ; он будет проигнорирован

что и тот факт, что Hot Reload не работает вообще.

это мой WebpackConfig:

'use strict'; 

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    'react-hot-loader/patch', 
    './Root/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) 
    ], 
    resolve: { 
    alias: { 
     'redux-devtools/lib': path.join(__dirname, '..', '..', 'src'), 
     'redux-devtools': path.join(__dirname, '..', '..', 'src'), 
     'react': path.join(__dirname, 'node_modules', 'react') 
    }, 
    root: [ 
    path.resolve('./Root'),path.resolve('./Root/Source') 
    ], 
    modulesDirectories: [ 
    'node_modules' 
    ], 

    extensions: ['', '.js'] 
    }, 
    resolveLoader: { 
    'fallback': path.join(__dirname, 'node_modules') 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['babel'], 
     exclude: /node_modules/, 
     include: __dirname 
    }, { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, '..', '..', 'src') 
    }, 
    { 
     test: /\.json?$/, 
     loader: 'json' 
    }, 
    { 
     test: /\.css?$/, 
     loaders: ['style', 'raw'], 
     include: __dirname 
    }, 
    { 
     test: /\.(jpe?g|png|gif|svg)$/, 
     loader: 'url', 
     query: { limit: 10240 } 
    } 
    ] 
    } 
}; 

это мой Babel.rc

{ 
    "presets": ["es2015-loose", "stage-0", "react"], 
    "plugins": ["react-hot-loader/babel"] 
} 

и, наконец, мой index.js (запись)

/// <reference path='../typings/browser.d.ts'/> 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { AppContainer } from 'react-hot-loader'; 
import {syncHistoryWithStore} from 'react-router-redux'; 
import {browserHistory } from 'react-router'; 
import Root from './Root'; 


import configureStore from './Source/Actions/configureStore'; 
import './Content/common.css' 


const store = configureStore(); 
const history = syncHistoryWithStore(browserHistory, store); 

import "react-big-calendar/lib/css/react-big-calendar.css" 
import BigCalendar from 'react-big-calendar'; 
import moment from 'moment'; 


moment.locale("pt-pt"); 
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment)); 

ReactDOM.render(
<AppContainer > 
<Root store={store} history = {history}/> 
</AppContainer>, 
document.getElementById('root') 
); 


if (module.hot) { 
    module.hot.accept('./Root',() => { 
    ReactDOM.render(
    <AppContainer > 
    <Root store={store} history = {history}/> 
    </AppContainer>, 
    document.getElementById('root') 
    ); 
    }); 
} 

Так как бы я на самом деле настроить мой текущий проект на действительно горячую перезагрузку компонентов, пока я редактирую код?

Answer 1

Следуйте инструкциям здесь: https://webpack.github.io/docs/hot-module-replacement.html

В коде заменить es2015-рыхлый с es2015 потому что es2015-рыхлый предустановка является устаревшим.

Попробуйте позвонить module.hot.accept();.

Если вы хотите горячий перезагрузить редуктор вы должны следовать инструкциям, описанные здесь: https://github.com/reactjs/react-redux/releases/tag/v2.0.0

Помните добавления -loader после ваших Бабель-погрузчиков.

Я создал набор стартера должны быть приняты в качестве рабочего примера:

https://github.com/agrcrobles/react-native-web-webpack-starter