React模塊無法熱升級

Im使用react-router和material-ui構建Web應用程序。我最近注意到，在使用ho loader與material-ui的同時，反應熱載入程序已經更新並解決了一些問題。當我使用它與反應路由器熱加載器不會爲兒童組件工作。這裏是我的index.jsReact模塊無法熱升級

import React from 'react'; 
import {render} from 'react-dom'; 
import { AppContainer } from 'react-hot-loader' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router' 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import routes from './routes'; 

injectTapEventPlugin(); 

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

render(<App/>,document.getElementById('app')); 

if (module.hot) { 
    module.hot.accept('./components/App',() => { 
    const NextApp = require('./components/App').default; 
    render(
     <AppContainer> 
     <MuiThemeProvider> 
     <NextApp/> 
     </MuiThemeProvider> 
     </AppContainer> 
     , 
     document.getElementById('app') 
    ); 
    }); 
}

這裏的代碼我的應用程序組件

import React from 'react'; 
import Home from './Home'; 
import About from './About/AboutPage.react'; 
import NavigationBar from './navigation/navigationBar.react'; 



class App extends React.Component{ 
    render(){ 
    return(
     <div> 
     <NavigationBar/> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default App;

路由文件

import React from 'react'; 
import {render} from 'react-dom'; 
import { Router, Route, Link, browserHistory,IndexRoute } from 'react-router' 
import App1 from './components/App'; 
import NavigationBar from './components/navigation/navigationBar.react'; 
import greetings from './components/Login/greetings'; 


export default (
    <Route path="/" component={App1}> 
     <IndexRoute component={greetings}/> 
    </Route> 
);

當過我做任何更改子組件的瀏覽器控制檯給出警告說
以下模塊不能熱更新:(完全重載需要編輯）這通常是因爲改變的模塊（和他們的父母）不知道如何熱重新加載自己。有關更多詳細信息，請參見http://webpack.github.io/docs/hot-module-replacement-with-webpack.html。任何特殊的原因，爲什麼我得到這個以及如何解決這個問題？

來源

2016-10-24 TRomesh

確保您還使用react-hot-loader的AppContainer組件來包裝初始渲染。就像這樣：

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

而且，我沒有看到你的WebPack配置，以便確保您還包括react-hot-loader/patch您的第一個條目是這樣，例如：

entry: [ 
    'react-hot-loader/patch', 
    `webpack-dev-server/client?http://localhost:${config.port}`, 
    'webpack/hot/only-dev-server', 
    './src/index.jsx' 
],

如果你也有一個.babelrc文件，請確保將其包含爲您的一個插件，如下所示：

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

來源

2016-10-24 19:15:33

React模塊無法熱升級

回答

相關問題