使用组件作为属性的react-loadable导入动态对象

Question

I have an index file where I export all of my SVG components:

import Twitter from './Twitter';
import Upload from './Upload';
import Cloud from './Cloud';
import Share from './Share';
import Eye from './Eye';
import Trash from './Trash';
import Search from './Search';

export {
  Facebook,
  Twitter,
  Upload,
  Cloud,
  Share,
  Eye,
  Trash,
  Search,
};

Then later in the app, I use them like:

import * as Icons from './index.js';

<Icons.Twitter />
...
<Icons.Search />

because I have a lot of these icons I would like to load them asynchronously with react-lodable .

I tried:

import React from 'react';
import Loadable from 'react-loadable';
import PulsingCircleLoader from '../PulsingCircleLoader';

const Icons = Loadable({
  loader: () => import(/* webpackChunkName: "icons" */ './index'),
  loading: () => <PulsingCircleLoader isLoading />,
});

export default Icons;

But this gives me an error:

warning.js?6327:33 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, or you might have mixed up default and named imports

that's probably because Icons.Twitter is at some point an PulsingCircleLoader with no static Twitter property.

How can I get around this?

Answer 1

This happens because you are importing your icons with export { ... } statement. But when you are using call like this import(/* webpackChunkName: "icons" */ './index'), the ./index file must have export default statement