1

我使用 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. 在可加载组件...

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

如果我：

  • 将模块导入其他地方（至于validationAPI，导入没有问题）
  • 删除导入

...该应用程序有效，我有异步行为。

注意：是否使用进口的东西并不重要。

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

另请注意，外部库不会给我任何问题：例如：该codemirror库仅包含在该文件中，但它仍然有效。只有本地模块给了我这个问题。

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

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

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

4

1 回答 1

0

我遇到了和你一样的问题......你有没有想过？

我能够让它与 Loadable.Map() 一起工作。但我觉得我什至不应该这样做！

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

于 2019-01-11T04:11:20.363 回答