CODEWITHSUNDEEP
javascriptreactjswebpackpreact
Millard
Millard

Reputation: 1157

Code Splitting React components

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:

enter image description here

Upvotes: 0

Views: 512

Answers (1)

Ematipico
Ematipico

Reputation: 1244

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

Upvotes: 1

Related Questions