Issue importing external modules from component included with 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?

@SakhiMansoor is doesn't matter I tried removing all of the stuff, also a simple empty functional component break the app. Again: this is not related to the component itself but on the import (even if unused) stuff. However: I will add an example component in any case — keul, Aug 30 '18 at 16:16
@SakhiMansoor You mean plugin-syntax-dynamic-import? Is this still required? If I try any `import('someting').then()` I load it properly and I've webpack splitpoints working — keul, Aug 30 '18 at 16:22
No. You need to do this if you're using stage-2. it's deprecated and will throw errors on console. — Sakhi Mansoor, Aug 30 '18 at 16:45

score 0 · Answer 1 · answered Jan 11 '19 at 04:11

0

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

answered Jan 11 '19 at 04:11

Andre Recinto

1

As my `something` module was a "tiny" one I simply kept it imported in the main module. This was acceptable for my environment. `.Map`could be a good workaround too (I don't remember if I tried this at that time). However in recent/modern React versions it's probably better to forget about `react-loadable` (which I hate a bit because it does not allow github issue) and use `React.lazy`. – keul Jan 11 '19 at 08:12
...sorry... I meant `Suspense`, not `.lazy`! – keul Jan 11 '19 at 08:26

Issue importing external modules from component included with react-loadable

1 Answers1