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

【问题标题】：Cannot read property 'then' of undefined | When i try to import a component with babel-dynamic-import无法读取未定义的属性 'then' |当我尝试使用 babel-dynamic-import 导入组件时
【发布时间】：2019-05-08 21:30:03
【问题描述】：

我正在尝试使用@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 配置文件中安装并添加了 @babel/plugin-syntax-dynamic-import。

【问题讨论】：

我认为您在导入声明 import('./Space') 之后不需要 .default。此外，您应该尝试使用React.lazy 而不是react-loadable。 React 支持延迟加载时为什么要使用外部库。

标签： reactjs babeljs react-loadable dynamic-import

【解决方案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

【讨论】：

哦，React.lazy() 必须用 Suspense 包裹起来……这很重要……