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

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

0 голосов
/ 31 августа 2018

Я не могу узнать, как импортировать класс в моем приложении 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…

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

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

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",]

Отлично работает.

0 голосов
/ 31 августа 2018

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

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

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

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

...