我使用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} />
);
我遇到的问题：如果我从我的应用程序中异步包含的模块 imports local modules never imported before ，我收到此错误：
警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object . 检查LoadableComponent的render方法 . 在LoadableComponent中......
例如：在上面的代码中我导入了 ./something . 如果之前从未在我的应用程序中加载此模块，我会收到上述错误 .
如果我：
-
在其他地方导入模块（对于
validationAPI，导入时没有问题） -
删除导入
...应用程序工作，我有异步行为 .
注意：如果使用进口的东西不重要 .
我还尝试将 something 模块移动到其他位置，但这似乎与模块位置或相对导入语法无关 .
另请注意，externals库不会给我任何问题：例如： codemirror 库仅包含在该文件中，但它仍然有效 . Only local modules 给我这个问题 .
找到的唯一解决方法是：不导入之前从未导入的任何内容，但在组件的文件中包含内联的 something 模块内容 .
这是可以接受的，但文件大小有点膨胀 .
我不确定这是反应加载或webpack或其他问题 . 有什么建议吗？
1 回答
我遇到了和你一样的问题......你有没有弄明白？
我能够使用Loadable.Map（） . 但我觉得我甚至不应该这样做！
https://github.com/jamiebuilds/react-loadable#loading-multiple-resources