从react-loadable随附的组件导入外部模块时出现问题

Question

I've a component loaded using react-loadable (5.4.0) that also loads some other local and external libraries:

import { validationAPI, docstringAPI, autocompleteAPI } from 'utils/request';
import something from './something';

import CodeMirror from 'react-codemirror';
import CM from 'codemirror';

import 'codemirror-docs-addon';
import 'codemirror-docs-addon/lib/main.css';

class MyComponent extends React.Component {
  render() {
     return (
        <div>What I do here it doesn't matter</div>
     )
  }
}
export default MyComponent

And this is the defined loadable:

import React from 'react';
import Loadable from 'react-loadable';

const Loading = () => (
  <div>
    Loading stuff
  </div>
);

const LoadableComponent = Loadable({
  loader: () => import('./MyComponent'),
  loading: Loading,
});

export default (props) => (
  <LoadableComponent {...props} />
);

The issue I have: if the module I include asynchronously also imports local modules never imported before from my app, I get this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of LoadableComponent . in LoadableComponent ...

For example: in the code above I have this ./something imported. If this module has never been loaded before in my app I get the error above.

If I:

• import the module somewhere else (as for validationAPI , which is imported with no issues)
• remove the import

...the app works and I've the async behavior.

Note : If the imported stuff is used or not doesn't matters.

I also tried to move the something module somewhere else, but this seems not related to the module position or to relative import syntax.

Note also that externals libraries does not give me any issues: for example: the codemirror library is included only in that file, but it still works. Only local modules give me the issue.

The only workaround found: not import anything never imported before, but include the something module content inline in the component's file.

This is acceptable but bloat the file size a bit.

I'm not sure this is an issue with react-loadable or webpack or something else. Any suggestion?

Answer 1

I'm running into the same issue as you... Did you ever figure it out?

I was able to get it to work with Loadable.Map(). But I feel I shouldn't even have to do it this way!

https://github.com/jamiebuilds/react-loadable#loading-multiple-resources