Блог

Главная - Вопросы по программированию - Ошибки импорта ES6 с помощью маршрутизатора React

Ошибки импорта ES6 с помощью маршрутизатора React

#javascript #reactjs #react-final-form #react-final-form-arrays

#javascript #reactjs #реакция-окончательная форма #react-окончательная форма-массивов

Вопрос:

Я получаю ошибки, которые настолько запутанны, что я понятия не имею, где искать решения, и которые вызывают беспокойство, потому что они, похоже, спрятаны глубоко в библиотеках.
Я работаю с шаблонным приложением ( react-boilerplate ) и библиотекой форм ( react-final-forms , react-final-form-arrays ) — и ошибки и странное поведение возникают при импорте. Воспроизводимые шаги следующие.

  1. из состояния, в котором приложение работает нормально:
  2. import { FieldArray } from 'react-final-form-arrays' на мою домашнюю страницу
  3. При горячей перезагрузке повторный рендеринг домашней страницы завершается неудачей, поэтому отображаются верхний и нижний колонтитулы, но домашняя страница не отображается повторно, но на консоли ошибок нет. тот же результат, если обновить страницу
  4. Перейдите на другую страницу, а затем вернитесь на домашнюю страницу — теперь с использованием маршрутизатора — и это выдает ошибку (обратите внимание, что импорт на странице еще не используется):

react.development.js?72d0:207 Предупреждение: React.createElement: недопустимый тип — ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: object.

Проверьте метод визуализации LoadableComponent . в загружаемом компоненте (созданном маршрутом), в маршруте (созданном приложением), в коммутаторе (созданном приложением), в div (созданном контекстом.Потребитель) в StyledComponent (созданном App__AppWrapper) в приложении в маршрутизаторе (созданном ConnectedRouter) в ConnectedRouter (созданном Connect (ConnectedRouter)) в Connect (ConnectedRouter) в IntlProvider (создан LanguageProvider) в LanguageProvider (создан Connect (LanguageProvider)) в Connect (LanguageProvider) в Provider

  1. удалите импорт, все вернется к норме.

На вопросы, связанные с импортом в фигурных скобках, обычно отвечают, что это так же просто, как разница между импортом по имени и импортом по умолчанию. здесь явно что-то сложнее. (Я пробовал оба, но его определенно должно быть имя). Связана ли проблема с загрузкой скриптов?

Комментарии:

1.Есть ли у react-final-form-arrays какие-либо зависимости, на которые он опирается, как на что-либо специфичное для babel? Должен ли <FieldArray /> компонент быть дочерним по отношению к react-final-form <Form /> компоненту?

2. Я не уверен, что вы имеете в виду, конечно, есть зависимости, но они должны устанавливаться автоматически. и FieldArray прерывает все при импорте, даже не добавляя его на страницу.

Ответ №1:

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