Невозможно прочитать свойство 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;

И мой кодв моем компоненте 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 вокруг компонента, который загружается лениво, иначе он не будет работать.

source: https://github.com/reactjs/reactjs.org/issues/1810