Code Splitting React components

Question

Im relatively new to React (i'm using preact.js, to be precise) and i am trying to code split out react components using webpack 2.

Im exporting my component as stated in the documentation and i am then importing it on load.

  import('./components/List').then((List) => {
    render(<List />, document.getElementById('main'));
  });

The script loads but i'm not handling the promise callback correctly and finding it hard to see any documentation that shows a working version.

List returns the following object:

Answer 1

I saw your repo. It looks like that your list component doesn't have a export default . I would add the default and inside your then , when you handle the promise, I'd do it in this way

.then(module => {
   const Component = module.default;
   render(<Component />, document.getElementById('main'))
})