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.

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.

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.