[Unable to import components]: Typescript version ^4.5.2 is not able to compile due typing issues.

[Wolfy18]

Description

I'm trying to import web components but I'm getting the following issue when I'm trying to load the components into my project.

import 'carbon-web-components/es/components/dropdown/dropdown';

Error:
Type 'K_6' cannot be used to index type 'HTMLElementTagNameMap'.
.
.
.
Type 'K_8' cannot be used to index type 'HTMLElementTagNameMap'.

node_modules/carbon-web-components/es/components/dropdown/dropdown.d.ts:976:1185 - error TS2536: Type 'K_8' cannot be used to index type 'HTMLElementTagNameMap'.

976         querySelectorAll<K_8 extends "object" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr">(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;

I feel it may be the Typescript version but the component should be up to date with Typescript requirements otherwise we won't be able to import the components. I'm pasting the dependencies section for you to take a look. Hopefully somebody can light the way.

  "dependencies": {
    "@shoelace-style/shoelace": "^2.0.0-beta.74",
    "carbon-web-components": "^1.21.0",
    "haunted": "^5.0.0",
    "lit": "^2.0.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.2",
    "@custom-elements-manifest/analyzer": "^0.4.17",
    "@open-wc/building-rollup": "^2.0.1",
    "@open-wc/eslint-config": "^4.3.0",
    "@open-wc/testing": "next",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.2",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "@web/dev-server": "^0.1.28",
    "@web/dev-server-esbuild": "^0.3.0",
    "@web/dev-server-storybook": "^0.5.1",
    "@web/rollup-plugin-copy": "^0.3.0",
    "@web/rollup-plugin-html": "^1.10.3",
    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
    "@web/test-runner": "next",
    "babel-plugin-template-html-minifier": "^4.1.0",
    "concurrently": "^5.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.4",
    "prettier": "^2.4.1",
    "rimraf": "^3.0.2",
    "rollup": "^2.75.4",
    "rollup-plugin-minify-html-literals": "^1.2.6",
    "rollup-plugin-summary": "^1.4.3",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-workbox": "^6.2.0",
    "tslib": "^2.3.1",
    "typescript": "^4.5.2"
  }

Component(s) impacted

import 'carbon-web-components/es/components/dropdown/dropdown'; import 'carbon-web-components/es/components/dropdown/dropdown-item';

Browser

No response

Carbon Web Components version

v1.21.0

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Application/website

https://betternoi.com

CodeSandbox example

https://github.com/carbon-design-system/carbon-web-components/blob/main/examples/codesandbox/basic/index.html

Steps to reproduce the issue (if applicable)

npm install @open-wc/create npm init @open-wc

// Scaffold Web Component

npm install haunted lit carbon-web-components

npm run start

// Import Dropdown into one of the project's component

node_modules/carbon-web-components/es/components/dropdown/dropdown.d.ts:976:1185 - error TS2344: Type 'HTMLElementTagNameMap[K_8]' does not satisfy the constraint 'Node'.

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues