0

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

突然间，在向模板组件添加@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

注意事项

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

我已经试过了...

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

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

有谁知道如何调试这个 - 甚至更好的修复？

4

1 回答 1

0

我想到了。我的组件的更完整版本是：

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参数的类型Element是从@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> { ... }

3.在import语句中使用别名

请注意：当使用@stencil eslint 规则时，他们会抱怨你重命名的导入并说“不允许自己的类成员公开”。

我在这里为它创建了一张票：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;
}
于 2021-04-28T13:19:03.640 回答