Проблема импорта внешних модулей из компонента, включенного с реагирующей загрузкой

У меня есть компонент, загруженный с использованием act-loadable (5.4.0), который также загружает некоторые другие локальные и внешние библиотеки:

import { validationAPI, docstringAPI, autocompleteAPI } from 'utils/request';
import something from './something';

import CodeMirror from 'react-codemirror';
import CM from 'codemirror';

import 'codemirror-docs-addon';
import 'codemirror-docs-addon/lib/main.css';

class MyComponent extends React.Component {
  render() {
     return (
        <div>What I do here it doesn't matter</div>
     )
  }
}
export default MyComponent

И это определенная загружаемая:

import React from 'react';
import Loadable from 'react-loadable';

const Loading = () => (
  <div>
    Loading stuff
  </div>
);

const LoadableComponent = Loadable({
  loader: () => import('./MyComponent'),
  loading: Loading,
});

export default (props) => (
  <LoadableComponent {...props} />
);

У меня есть проблема: если модуль, который я включаю, асинхронно также импортирует локальные модули, никогда ранее не импортированные из моего приложения, я получаю эту ошибку:

Предупреждение: React.createElement: тип недействителен - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.

Проверьте метод визуализации LoadableComponent, в LoadableComponent...

Например: в приведенном выше коде у меня есть это ./something импортирован. Если этот модуль никогда не загружался ранее в моем приложении, я получаю сообщение об ошибке выше.

Если я:

  • импортировать модуль куда-то еще (как для validationAPI, который импортируется без проблем)
  • удалить импорт

... приложение работает, и у меня асинхронное поведение.

Примечание: если импортированный материал используется или нет, это не имеет значения.

Я также пытался переместить something модуль где-то еще, но это, похоже, не связано с положением модуля или относительным синтаксисом импорта.

Обратите внимание, что внешние библиотеки не доставляют мне никаких проблем: например: codemirror Библиотека включена только в этот файл, но все еще работает. Только локальные модули дают мне проблему.

Единственный найденный обходной путь: не импортировать ничего, что никогда не импортировалось раньше, а включать something Содержимое модуля встроено в файл компонента.

Это приемлемо, но немного увеличьте размер файла.

Я не уверен, что это проблема с реагирующей загрузкой или веб-пакетом или чем-то еще. Любое предложение?

Источник

0 ответов

Я сталкиваюсь с той же проблемой, что и вы... Вы когда-нибудь понимали это?

Я смог заставить его работать с Loadable.Map(). Но я чувствую, что даже не должен был так поступать!

https://github.com/jamiebuilds/react-loadable

Источник
Другие вопросы по тегам