react-loadable import from multiple class exported js

Question

How to import from a multiple class exported js file in react-loadable.
I am trying to import CustomButton from MyButton.js using react-loadable in Home.js. This is the only way I know to do it, is not working.

MyButton.js

import {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
} from './buttons';
module.exports = {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
}

Home.js

const AsyncButton = Loadable({
  loader: () => import('../../button/MyButton'),
  loading: Loading
});

Please help. Thanks in advance.

Roentgenotherapy

Answer 1

I was able to do it this way:

const AsyncButton = Loadable({
  loader: () => import('../../button/MyButton').then(module => module.CustomButton),
  loading: Loading
});

However, I can't get it where one variable contains all the other exports.

Paulina

Answer 2

I Found a solution from

react-loadable documentation

Loadable({
  loader: () => import('./my-component'),
  render(loaded, props) {
    let Component = loaded.namedExport;
    return <Component {...props}/>;
  }
});

Its working.

Roentgenotherapy

Answer 3

I know this is answered, but I came up with a way around getting one variable to contain all named exports. See below.

    AsyncSubSites = namedComponent => Loadable({
    loader: () =>
      import( /*webpackChunkName: "SubSites"*/ "./SubSites/SubSites"),
    loading: () => <Loading/>, //loader/spinner etc.
    modules: ["SubSites"],
    render(loaded, props) {
      let Component = loaded[namedComponent];
      return <Component {...props}/>;
    }
  })

and used with react-router as...

<Route path="/:slug" exact component={AsyncSubSites('Membership')} />
<Route path="/:slug" exact component={AsyncSubSites('About')} />

and whatever other named export

Subdued