Stencil：将“@Method”添加到组件后突然出现构建错误而没有消息

Question

我不能在这里提供太多信息（因为真的没有），但只有这个：

突然之间，在向模板组件添加 @Method 功能后:

@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

注意事项

• 错误消息中的 return 类型 Promise<void> 以红色突出显示
• 还有其他 @Method 可以在这个组件中工作（即使使用相同的 return 类型）。
• “损坏的”@Method 在结构上等同于那些正常工作的。
• TypeScript 编译器不会抱怨任何事情
• 只有模板编译器失败

我已经试过了...

• 到 google 这个问题 - 没有找到任何关于这个问题的提示
• 删除 async 并添加 return Promise.resolve()
• 重命名方法（我的意思是..为什么不呢）
• 将方法移动到class中的另一个地方
• 删除整个方法（编译良好 x( )
• 删除@Method装饰器（已编译，但当然我的方法已从API中删除）
• 删除 node_modules 文件夹并重新安装

我记得我曾经有过这个错误，显然我以某种方式修复了它（或者没有，idk）。但是如果我这样做了，我不记得是怎么做到的。

有没有人知道如何调试这个 - 或者更好地修复？

Answer 1

我明白了。我的组件的更完整版本是：

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 导入的 Element 类型，这显然是错误的并导致对于这个奇怪的无用错误。

可能的解决方案

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> { ... }

3。在导入语句中使用别名

请注意：当使用@stencil eslint规则时，他们会抱怨你重命名的import并说“own class members are not allowed to be public".

我在这里为它创建了一张票：https://github.com/ionic-team/stencil-eslint/issues/28

import { Element as ElementDecorator} from '@stencil/core';

class MenuContent {
  // eslint will complain about that:
  // "Own class properties cannot be public."
  @ElementDecorator() element: HTMLMenuContentElement;
}