React 组件 require.default 未定义

Question

我已经构建了以下组件：

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);
    });
}

加载页面没问题，但是用一些不同的文本更新 App 组件后，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。