Couldn't build

[wonrax]

I couldn't build the code. Hadn't made any change. Log:

$ npm run start

> stencil-getting-started@0.0.1 start
> stencil build --dev --watch --serve

[26:03.9]  @stencil/core
[26:04.3]  v2.14.0 💫
[26:10.9]  build, app, dev mode, started ...
[26:11.0]  transpile started ...
[26:18.9]  transpile finished in 7.92 s

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/compiler/lib.dom.d.ts:4482:101
           Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.Type 'HTMLElement |
           HTMLAppHomeElement | HTMLAppProfileElement | HTMLAppRootElement | HTMLAnchorElement | ... 74 more ... |
           HTMLTemplateElement' is not assignable to type 'Element'.Type 'HTMLStencilRouteLinkElement' is not
           assignable to type 'Element'.Property 'ariaLabel' is optional in type 'HTMLStencilRouteLinkElement' but
           required in type 'Element'.

   L4481:   */
   L4482:  TagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
   L4483:  getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/compiler/lib.dom.d.ts:4770:101
           Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.Type 'HTMLElement |
           HTMLAppHomeElement | HTMLAppProfileElement | HTMLAppRootElement | HTMLAnchorElement | ... 74 more ... |
           HTMLTemplateElement' is not assignable to type 'Element'.

   L4769:  getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
   L4770:  TagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
   L4771:  getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;

[ ERROR ]  TypeScript: ./node_modules/@stencil/router/dist/types/components.d.ts:105:13
           Interface 'HTMLStencilRouteLinkElement' cannot simultaneously extend types 'StencilRouteLink' and
           'HTMLStencilElement'.Named property 'ariaLabel' of types 'StencilRouteLink' and 'HTMLStencilElement' are not
           identical.

    L105:    interface HTMLStencilRouteLinkElement extends Components.StencilRouteLink, HTMLStencilElement {}
    L106:    var HTMLStencilRouteLinkElement: {

[26:18.9]  build failed, watching for changes... in 7.97 s

[26:18.9]  http://localhost:3333/

[MrBrunoWolff]

same here (using LTS v16 + latest npm)

Wondering if it's because of @stencil/router:1.0.1 vs latest version(s) of @stencil/core ("stable" release for router is a bit old now).

Because of that, I tried the default "starter app" (this repo) + latest @stencil/router pre-release and all those errors go away... but then there's the actual "starter app" code referencing things from the older router version.

For now, an "easy" fix is going with the classic skipLibCheck: false (quick reference)

[wonrax]

For now, an "easy" fix is going with the classic skipLibCheck: false (quick reference)

Thanks, I got it running finally

[rwaskiewicz]

Hey folks, sorry about that! As a temporary workaround I've pinned the Stencil version to v2.13.0 in https://github.com/ionic-team/stencil-app-starter/pull/85. I'm not going to close this issue at this time - I'm going to work to get some of our future plans for @stencil/router out and open, and we'll go from there.

In the mean time, there are two workarounds for folks coming to this issue that I'd like to summarize below:

1. Setting skipLibCheck: false as @MrBrunoWolff suggested
2. Pinning your Stencil version to v2.13.0 for the time being

Sorry again!

[safaalai]

A quick verification (question) related to this same bug: npm init stencil pulls from https://www.npmjs.com/package/create-stencil. Is this correct? This package then offers 3 choices including the ionic-pwa and this differs from the documentation on Stencil (https://stenciljs.com/docs/getting-started). I am asking this because elsewhere there is a comment that ionic-pwa is deprecated and that if you see three choices with npm stencil init then you're pulling the wrong package from some unknown place. I've gone through all my setup and verified that the package is being pulled from https://registry.npmjs.org/create-stencil and not elsewhere.

[rwaskiewicz]

@safaalai

A quick verification (question) related to this same bug: npm init stencil pulls from https://www.npmjs.com/package/create-stencil. Is this correct?

Yes, that's correct 👍

This package then offers 3 choices including the ionic-pwa and this differs from the documentation on Stencil (https://stenciljs.com/docs/getting-started).

That's also correct. There is currently a PR up for the Stencil Site to correct that documentation - https://github.com/ionic-team/stencil-site/pull/1049/files#diff-e3d448eed37ea7e7f5608503887ca7d06b0443d234927ca893b8b7427c2fdd48L37-L41

I am asking this because elsewhere there is a comment that ionic-pwa is deprecated and that if you see three choices with npm stencil init then you're pulling the wrong package from some unknown place. I've gone through all my setup and verified that the package is being pulled from https://registry.npmjs.org/create-stencil and not elsewhere.

ionic-pwa was deprecated and is no longer maintained by Ionic. However, a fork of it is now maintained by the community, and its source is available at https://github.com/stencil-community/stencil-ionic-starter

When running npm init stencil we try to make this clear using the community tag, with a URL to the Stencil Community GH page:

➜  ~ npm init stencil

? Select a starter project.

Starters marked as [community] are developed by the Stencil Community,
rather than Ionic. For more information on the Stencil Community, please see
https://github.com/stencil-community › - Use arrow-keys. Return to submit.
❯   component                Collection of web components that can be used anywhere
    app [community]          Minimal starter for building a Stencil app or website
    ionic-pwa [community]    Ionic PWA starter with tabs layout and routes