Stencil: Внезапная ошибка сборки без сообщения после добавления `@Method` в компонент

Question

Я не могу дать здесь слишком много информации (потому что ее на самом деле нет), но только это:

Внезапно после добавления функции к компоненту трафарета :

      @Method()
async setMenuItems(items: Element[]): Promise<void> {
  // code here
} 

компонент перестал компилироваться из-за следующей - действительно бесполезной - ошибки :

      [ ERROR ]  ./src/components/menu-content/menu-content.tsx:63:44
           build error

     L62:  @Method()
     L63:  async setMenuItems(elements: Element[]): Promise<void> {
     L64:    const unsupportedChildren = elements.filter(e => !this.isSupportedChild(e)).map(e => e.tagName);

[12:37.1]  build failed in 7.02 s

На что обратить внимание

• тип возврата Promise<void> внутри сообщения об ошибке выделено красным
• есть и другие, которые работают в этом компоненте (даже с тем же возвращаемым типом).
• «сломанный» структурно равен тем, что действительно работает.
• Компилятор TypeScript ни на что не жалуется
• Не работает только компилятор трафарета

Я уже пробовал ...

• в гугл по этой проблеме - подсказок по этой проблеме не нашел
• убрать async и добавить return Promise.resolve()
• переименовать метод (я имею в виду .. почему бы и нет)
• переместить метод в другое место в классе
• удалить весь метод (отлично компилирует x ()
• убрать @Method декоратор (скомпилирован, но, конечно, мой метод удален из API)
• удалить node_modules папку и переустановите

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

Есть ли у кого-нибудь идеи, как это отладить или даже лучше исправить?

Answer 1

Я столкнулся с этой же проблемой не сElementтип, но сEventтипа, так что, похоже, он укоренился глубже - также примерно через год после того, как вы сообщили об этой проблеме, кажется, что проблема со Stencil все еще существует.

Answer 2

Я понял. Более полная версия моего компонента:

      import { Element, ... } from '@stencil/core';

class MenuContent {
  @Element() element: MenuContentElement;

  @Method()
  setMenuItems(elements: Element[]): Promise<void> {
    // ------------------^^^^^^^
    // Element is meant to be the built-in browser interface for Element
    // but stencil thinks that this is the imported Element from '@stencil/core'!
  }
}

Проблема в том, что трафарет предполагает, что elements параметр имеет тип, который импортируется из @stencil/core что явно неверно и приводит к этой странной бесполезной ошибке.

Возможные решения

1. Используйте псевдоним для встроенного Element тип

      // types.ts
export type DomElement = Element;

// menu-content.tsx
import { DomElement } from './types';
...
async setMenuItems(elements: DomElement[]): Promise<void> { ... }

2. Переключитесь на HTMLElement

Примечание. Это допустимо только тогда, когда вам не нужно поддерживать другие типы элементов, такие как SVGElements например!

      async setMenuItems(elements: HTMLElement[]): Promise<void> { ... }