は、私は次のコンポーネントを構築してきた部品require.default未定義

Question

を反応させるのページをロード

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) 

コンソールログでNextAppがundefinedを返しているため、render(NextApp)は失敗しています。

なぜconst NextApp = require('...').defaultはundefinedを返すのですか？その問題を解決するには？

ありがとうございます。

Answer 1

Webpack 2を使用していますか？もう一度requireを行うべきではありません。 acceptコールバック内でrender(App)に再度電話することができます。 hereを参照してください。