从react可加载的组件中导入外部模块

Question

我有一个使用react可加载(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: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但是got: object。 检查LoadableComponent的呈现方法。在LoadableComponent ..。

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

如果我：

• 将模块导入到其他地方(如validationAPI，它是在没有问题的情况下导入的)
• 移除导入

...the应用程序工作，我有异步行为。

注意:如果进口的东西被使用或不使用，这并不重要。

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

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

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

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

我不确定这是一个问题的反应-加载或webpack或其他什么。有什么建议吗？

Answer 1

我遇到了和你一样的问题。你想过吗？

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

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