次のプロジェクトがあります。
https://github.com/napolev/stencil-cannot-find-name
次の 2 つのファイルが含まれています。
custom-container.tsx
import { Component, Element, State } from '@stencil/core';
@Component({
tag: 'custom-container',
styleUrl: 'custom-container.scss',
})
export class WebComponent {
@Element() el!: HTMLStencilElement;
@State() label: String = '<empty>';
componentDidLoad() {
document.querySelector('.button_get_anchor').addEventListener('click', () => {
let position = '<unset>';
position = this.el.querySelector('custom-details').getDefaultKnobEPosition();
this.label = position;
});
}
render() {
return [
<div class="label">{this.label}</div>,
<custom-details></custom-details>,
<div>
<button class="button_get_anchor">Get Anchor</button>
</div>
];
}
}
custom-details.tsx
import { Component, Method } from '@stencil/core';
@Component({
tag: 'custom-details',
styleUrl: 'custom-details.scss',
})
export class WebComponent {
render() {
return [
<div class="details">This is the "custom-details"</div>
];
}
@Method()
sayHelloWorldOnConsole() {
console.log('Hello World!');
}
//*
@Method()
getDefaultKnobEPosition(): Anchor {
return Anchor.Left;
}
//*/
}
export enum Anchor {
Left = 'left',
Center = 'center',
Right = 'right',
}
私の問題は次のとおりです。
$ npm start --es5
次のエラーが表示されます。
[ ERROR ] TypeScript: ./stencil-cannot-find-name/src/components.d.ts:66:39
Cannot find name 'Anchor'.
L65: interface CustomDetails {
L66: 'getDefaultKnobEPosition': () => Anchor;
L67: 'sayHelloWorldOnConsole': () => void;
[21:56.0] dev server: http://localhost:3333/
[21:56.0] build failed, watching for changes... in
15.59 s
次の画像でわかるように:
また、次の画像でわかるようにnpm
、でコンパイルする前でも、その問題について通知されます。Visual Studio Code
問題を引き起こしている行は次のとおりです。
https://github.com/napolev/stencil-cannot-find-name/blob/master/src/components.d.ts#L66
上記のファイルはauto-generated
であるため、問題を修正するために変更することはできません。
これを解決する方法について何か考えはありますか?
ありがとう!