React component require.default undefined

Question

I've build the following component:

import React from 'react';

const App = () => (

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

);

export default App;

And I use react-hot-loader boilerplate as:

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

Loading the page is fine, but after updating the App component with some different text, HMR is giving error reloading the page:

[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)

As can be seen in the console log, the NextApp is returning undefined, so the render(NextApp) is failing.

Why is the const NextApp = require('...').default is returning undefined ? How to solve that issue ?

Answer 1

Are you using Webpack 2? You should not do a require again. You can simply call render(App) again inside accept callback. See here.