@stencil/async-methods is not working properly

[adrianiskandar]

Working with the latest version of this plugin:
"@stencil/eslint-plugin": "^0.3.1",
We discover is not behaving as expected, when we run eslint is throwing the following error:

error External @method() expandPopover() must return a Promise. Consider prefixing the method with async, such as @method() async expandPopover() @stencil/async-methods

But we have the async decorator in the method:

    /**
     * some comment
     */
    @Method()
    async expandPopover(): Promise<void> {
        if(this.trigger === PopoverTooltipTrigger.Conditional){
            this.openPopover();
        }
    }

What is worse is that if you run the eslint --fix command, it will generate this code:

    /**
     * some comment
     */


    /**
     * some comment
     */
    

    /**
     * some comment
     */
    

    /**
     * some comment
     */
    @Method()
    asyncasync    async expandPopover(): Promise<void> {
        if(this.trigger === PopoverTooltipTrigger.Conditional){
            this.openPopover();
        }
    }

Is multiplying the comment by 4 and is adding multiple async words before the method declaration.

We couldn't figure it out how to fix this, can you help?
Thanks.

[shanswami]

I also have this exact issue

[gtranter]

I also have the same issue - any update? It's been over a year. Using version 0.3.1.

[gtranter]

After quite a bit of experimentation, I was able to get rid of the error in my project by adding to the .eslintrc.json as recommended in the readme:

  "parserOptions": {
    "project": "./tsconfig.json"
  },

HOWEVER, if you legitimately have this error, such as code like:

@Method()
sayHello() {
    return "Hello";
}

the fixer still generates duplicate jsDoc blocks - in my case 1,023 blocks or 5,115 lines, AND doesn't fix the problem - the async keyword is still missing and the error persists.

So even though the error can be avoided, the rule is still useless because using --fix will wreak havoc on code.

[rwaskiewicz]

Hey @adrianiskandar @gtranter,

I took a stab at reproducing this this afternoon, and wasn't able to successfully. Would it be possible for either of you to create a minimal reproduction & push it to github so that I can pull it down?

Apologies this took so long to get to - the new Stencil team and I are starting to put some effort towards fixing up this library.

[gtranter]

@rwaskiewicz Here's a demo repo: https://github.com/gtranter/stencil-eslint-async-methods-bug. Just run npm run lint -- --fix after installing.

[rwaskiewicz]

Thanks!

[mikkelrom]

I'm seeing this issue as well 🙂

[Stormix]

+1

[danielleroux]

+1

[boakenfull]

+1

[ffaubry]

+1

[tfrijsewijk]

@adrianiskandar and @rwaskiewicz, please see this comment by @gtranter which mentions the parserOptions. For me this was also the solution. The autofix --fix is still broken though.

[thatdom]

+1

[IPospelova]

i have the same issue, get 800+ line of repeating comments.

[krbaio3]

The problem is here:

create(context) {
        const stencil = stencilComponentContext();
        const parserServices = context.parserServices;  // <--- HERE
        const typeChecker = parserServices.program.getTypeChecker();
        return Object.assign(Object.assign({}, stencil.rules), { 'MethodDefinition > Decorator[expression.callee.name=Method]': (decoratorNode) => {

When read context, the property is undefined