Question

我正在尝试使用@babel/plugin-syntax-dynamic-import导入react组件，但是我无法使其工作。

这是我主要代码中的代码：

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;

我在我的Space组件中的代码：

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

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

1 个答案: