2017-04-06 69 views
0

我已經建立了以下組件:陣營組件require.default不確定

import React from 'react'; 

const App =() => (

     <div className="wrapper"> 
      <h1>My App!!!!</h1> 
     </div> 

); 

export default App; 

,而且我用react-hot-loader樣板爲:

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

const dest = document.getElementById('content'); 

const render = (Component) => { 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    dest 
); 
}; 

render(App); 

if (module.hot) { 
    module.hot.accept('./component/App/app',() => { 
     const NextApp = require('./component/App/app').default; // eslint-disable-line global-require 


     console.log('====================================='); 
     console.log(NextApp); 
     render(NextApp); 
    }); 
} 

加載頁面是好的,但在更新應用程序組件後與一些不同的文本,HMR給錯誤重新加載頁面:

[HMR] connected 
client.js?6a8d:199 [HMR] bundle rebuilding 
client.js?6a8d:207 [HMR] bundle rebuilt in 557ms 
process-update.js:27 [HMR] Checking for updates on the server... 
client.js:24 ===================================== 
client.js:25 undefined 
warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 
printWarning @ warning.js:36 
warning @ warning.js:60 
createElement @ ReactElementValidator.js:171 
patchedCreateElement @ patch.dev.js:164 
render @ client.js:11 
(anonymous) @ client.js:26 
hotApply @ bootstrap a9a1805…:566 
cb @ process-update.js:52 
(anonymous) @ process-update.js:68 
process-update.js:115 [HMR] Cannot check for update (Full reload needed) 
handleError @ process-update.js:115 
applyCallback @ process-update.js:45 
process-update.js:116 [HMR] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 
    at invariant (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:946:15) 
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:11215:55) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19850:24) 
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19813:10) 
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19734:12) 
    at ReactCompositeComponentWrapper.receiveComponent (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19636:10) 
    at Object.receiveComponent (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:3479:22) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19843:23) 
    at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19813:10) 
    at ReactCompositeComponentWrapper.updateComponent (http://localhost:3001/dist/main-a9a1805da1160c9fe908.js:19734:12) 

由於可以s在控制檯日誌中,NextApp正在返回undefined,所以render(NextApp)失敗。

爲什麼const NextApp = require('...').default正在返回undefined?如何解決這個問題?

感謝您的幫助。

回答

1

您使用的是Webpack 2嗎?您不應該再次執行require。您可以在accept回撥內再次撥打render(App)。請參閱here

+0

什麼暗示...是的,我使用的是Webpack 2,並且在漫遊2天后解決了這個問題....謝謝! – Mendes

+0

☺很高興知道它有幫助。 – hazardous