Search code examples
typescripttypescript-typingshtmlelements

Using bare import via Typescript Compiler Paths opion fails to resolve type on class extends HTMLELement

Typescript,

When I import Component using a complete path, typescript compilation succeeds:

import { Component } from "../node_modules/@browser-modules/web.component/lib/component.js"

export class Pin extends Component {
}

Where Component is a class which extends HTMLElement:

export class Component extends HTMLElement {
}

However, when I import Component using bare import, via paths compiler option, the typescript compiler fails to recognize the existence of HTMLElement properties on Pin.

import { Component } from "@browser-modules/web.component"

export class Pin extends Component {
}

Paths in compiler options:

"paths": {
    "@browser-modules/web.component": 
        ["../node_modules/@browser-modules/web.component/lib/component.js"]
}

compiler error:

compiler error 1

To make sure I have specified the correct path, I changed the path to an invalid path as follows:

"paths": {
    "@browser-modules/web.component": 
        ["../node_modules/@browser-modules/web.component/lib/component_invalid.js"]
}

Now the typescript compiler cannot find the modules and also not the HTMLElement property:

compiler error 2

It is obvious to me that the compiler should fail when I am using an invalid path.

However, when using the correct path, I would expect the typescript compiler to recognize Pin extends Component which extends HTMLElement

In summary, for some reason, when using bare import, via paths compiler option, typescript compiler fails to recognize properties of HTMLElement in extended class Component

gitHub Repo where the complete path is used and compilation succeeds when executing npm test

am I missing something basic here?

Solution

  • Suggestion made by @tscpp:

    Add "moduleResolution": "node" to typescript compiler options.

    Work like a charm! Thanks!