Vue. js: несовместимый «Неизвестный пользовательский элемент», который разрешен в HMR - PullRequest
Новая
       6

Vue. js: несовместимый «Неизвестный пользовательский элемент», который разрешен в HMR

7 голосов
/ 26 февраля 2020

Я знаком с регистрацией компонентов. Это не низко висящий фрукт, относящийся к:

Проблема

При использовании сервера разработки возникла противоречивая проблема «Неизвестный пользовательский элемент» в один компонент (сейчас несколько). Кажется, что это происходит только в том случае, если я перезагружаю страницу, и начнет работать правильно, если я предложу серверу dev выполнить горячую перезагрузку модуля (HMR) (Ie. Изменение чего-либо в шаблоне и сохранение файла).

  • Компонент: PropertyEditForm
  • Импортируемый компонент: ViewEditChip
  • ViewEditChip используется в других компонентах без проблем
  • Я назначаю компонент, как и ожидалось, в PropertyEditForm
    • components: {'view-edit-chip': ViewEditChip} (ts)
  • Эта проблема исчезает, если я запускаю HMR, но всегда существует после перезагрузки приложения

Ошибка:

Неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

Код

Помните, что это TypeScript с использованием синтаксиса компонента класса

ViewEditChip объявление: 

@Component({name: 'view-edit-chip'})

PropertyEditForm объявление: 

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

PropertyEditForm использование шаблона: 

<view-edit-chip :item.sync="item"></view-edit-chip>

Мысли

  • Я не уверен, связано ли это с тем, где оно используется или как оно используется?
  • Я сомневаюсь это проблема, связанная с самим ViewEditChip, или это импорт, так как он используется во многих других местах без проблем.
    • Фактически, большая часть структуры PropertyEditForm копируется / вставляется из других рабочих компонентов
  • Проблема с веб-пакетом?

Дополнительно Информация

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

Например, у меня есть компоненты FileSystemTree, FileSystemToolbar, & FileSystemMainView. Если я использую их в представлении FileSystemView, это работает как ожидалось. Если я создаю FileSystem, компонент в том же каталоге, что и вышеупомянутые три, так что его можно использовать повторно, я получаю ошибку, даже если это копирование / вставка кода из FileSystemView.

Пример ограниченного обходного пути

Если переместить FileSystem вверх на один каталог и изменить импорт на вложенный каталог (Имеет index.ts) вместо ., проблема исчезнет. Но если я перенесу его обратно в тот же каталог, что и импортируемые компоненты, проблема вернется.

...