Как импортировать класс в разделении кода с помощью import()?

Question

Я не могу узнать, как импортировать класс в моем приложении React после использования разделения кода.

До (это работает!):

import React, {PureComponent} from 'react';
import Tus from './components/test';

 class Shopper extends PureComponent {
    constructor (props) {
    super(props); }

  uploadModal () { 

/* some function code... */

   .use(Tus, { 
        endpoint: 'http://192.168.22.124:3000/upload/'
    })
  /* more codes... */ 
 }

После использования разделения кода (не работает):

import React, {PureComponent} from 'react';

 class Shopper extends PureComponent {   
    constructor (props) {
    super(props); }

  uploadModal () { 

/* some function code... */

   .use(import('./components/test').then(Tus => Tus, { 
        endpoint: 'http://192.168.22.124:3000/upload/'
    })
  /* more codes... */ 
 }

Я получаю эту ошибку после использования разделения кода

TypeError: ожидал класс плагина, но получил объект. Пожалуйста, убедитесь, что плагин был импортирован и написан правильно.

Когда я console.log

import('./component/test').then(Tus => console.log(Tus))

Я получаю это:

ƒ Tus(uppy, opts) {
    _classCallCheck(this, Tus);

    var _this = _possibleConstructorReturn(this, _Plugin.call(this, uppy, opts));

    _this.type = 'uploader';
    _this.id = 'Tus';
    _this.titl…

Answer 1

Похоже, что в вашем рабочем примере (до разделения кода) вы импортируете экспорт по умолчанию из `'./components/test'.

После вас динамически import чтобы разрешить расщепление кода, вы должны использовать Tus.default добиться того же результата. Вы можете прочитать больше об этом в документации по разделению кода в веб-пакете.

Другими словами, import('./component/test').then(Tus => Tus.default)

Надеюсь, это поможет! Ура!

Answer 2

Вы также можете использовать реагирующую загрузку, это обеспечивает вам запасной вариант загрузки компонента:

function Loading() {
  return <div>Loading...</div>;
}

const Test= Loadable({
  loader: () => import('./components/test'),
  loading: Loading,
});

В вашем маршруте:

 <Route exact path="/" component={Test} />

Вы должны были установить: в вашем package.json:

"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.54",

в.babelrc

"plugins": [
"@babel/plugin-syntax-dynamic-import",]

Работает отлично.