0

我正在尝试导入一个反应组件,@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 配置文件中。

4

1 回答 1

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

于 2019-05-09T07:52:12.647 回答