无法读取未定义的属性'then' |当我尝试使用 babel-dynamic-import 导入组件时

Question

我正在尝试导入一个带有@babel/plugin-syntax-dynamic-import的反应组件，但我无法使其工作。

这是我在主要组件中的代码：

import React from 'react';
import Loadable from 'react-loadable';
const Test = Loadable({
loader: () => import('./Space').default,
loading: <div>loading</div>
});
const App = () => <Test />;
export default App;

以及我的空间组件中的代码：

import React from 'react';
const Space = () => <h1>hello from space</h1>;
export default Space;

使用此代码，我收到此错误：Uncaught TypeError: Cannot read property 'then' of undefined

我把这个放在这里，不知道它是否有帮助：The above error occurred in the <LoadableComponent> component: react-dom.development.js:17117

是的，我已经安装并添加了@babel/plugin-syntax-dynamic-import我的 babel 配置文件。

Answer 1

好的，我使用 React.lazy 解决了它(请参阅@Mario Subotic 注释)。

这是我的最终代码：

import React, { lazy, Suspense } from 'react';
import Loadable from 'react-loadable';
const Test = lazy(() => import('./Space'));
const App = () => (
<Suspense fallback={<div>Loading...</div>}>
<Test />
</Suspense>
);
export default App;

注意：学徒必须在您延迟加载的组件周围使用Suspense。

来源： https://github.com/reactjs/reactjs.org/issues/1810