Question

我已经使用react-loadable（5.4.0）加载了一个组件，该组件还加载了一些其他本地和外部库：

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

这是定义的可加载项：

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} />
);

我遇到的问题：如果我异步包含的模块还从应用程序中导入从未导入过的本地模块，则会出现此错误：

警告：React.createElement：类型无效-预期为字符串   （对于内置组件）或类/函数（对于复合   组件），但得到了：对象。

检查LoadableComponent的渲染方法。       在LoadableComponent中       ...

例如：在上面的代码中，我导入了此./something。如果此模块以前从未在我的应用程序中加载过，我会收到上述错误。

如果我是

将模块导入其他地方（与validationAPI一样，导入没有问题）
删除导入

...该应用正常运行，并且出现了异步行为。

注意：是否使用导入的内容无关紧要。

我还尝试将something模块移动到其他位置，但这似乎与模块位置或相对导入语法无关。

还请注意，外部库不会给我带来任何问题：例如：codemirror库仅包含在该文件中，但仍然可以使用。 只有本地模块给我问题。

找到的唯一解决方法：不导入以前从未导入的任何内容，而是在组件的文件中内联something模块内容。

这是可以接受的，但是文件大小有点膨胀。

我不确定这是react-loadable或webpack还是其他问题。有什么建议吗？

Answer 1

我遇到了与您相同的问题...您知道吗？

我能够使它与Loadable.Map（）一起使用。但我觉得我什至不必这样做！

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

从react-loadable

1 个答案: