Component type resolution fails including Vue types #2111

echjordan0 · 2024-06-10T23:10:03Z

echjordan0
Jun 10, 2024

Describe the bug

On version 2.15.1 including TS types as recommended in the Vue setup e.g.
"types": ["webpack-env", "jest", "vuetify", "@shoelace-style/shoelace/dist/types/vue"],

eslint is unable to resolve:

../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:3:15 - error TS2614: Module '"../../components/animation/animation.component.js"' has no exported member 'SlAnimation'. Did you mean to use 'import SlAnimation from "../../components/animation/animation.component.js"' instead?
3 import type { SlAnimation } from "../../components/animation/animation.component.js";
                ~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:4:15 - error TS2614: Module '"../../components/animated-image/animated-image.component.js"' has no exported member 'SlAnimatedImage'. Did you mean to use 'import SlAnimatedImage from "../../components/animated-image/animated-image.component.js"' instead?
4 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
                ~~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:5:15 - error TS2614: Module '"../../components/avatar/avatar.component.js"' has no exported member 'SlAvatar'. Did you mean to use 'import SlAvatar from "../../components/avatar/avatar.component.js"' instead?
5 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
                ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:6:15 - error TS2614: Module '"../../components/alert/alert.component.js"' has no exported member 'SlAlert'. Did you mean to use 'import SlAlert from "../../components/alert/alert.component.js"' instead?
6 import type { SlAlert } from "../../components/alert/alert.component.js";
                ~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:7:15 - error TS2614: Module '"../../components/badge/badge.component.js"' has no exported member 'SlBadge'. Did you mean to use 'import SlBadge from "../../components/badge/badge.component.js"' instead?
7 import type { SlBadge } from "../../components/badge/badge.component.js";
                ~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:8:15 - error TS2614: Module '"../../components/button/button.component.js"' has no exported member 'SlButton'. Did you mean to use 'import SlButton from "../../components/button/button.component.js"' instead?
8 import type { SlButton } from "../../components/button/button.component.js";
                ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:9:15 - error TS2614: Module '"../../components/breadcrumb/breadcrumb.component.js"' has no exported member 'SlBreadcrumb'. Did you mean to use 'import SlBreadcrumb from "../../components/breadcrumb/breadcrumb.component.js"' instead?
9 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
                ~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:10:15 - error TS2614: Module '"../../components/breadcrumb-item/breadcrumb-item.component.js"' has no exported member 'SlBreadcrumbItem'. Did you mean to use 'import SlBreadcrumbItem from "../../components/breadcrumb-item/breadcrumb-item.component.js"' instead?
10 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
                 ~~~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:11:15 - error TS2614: Module '"../../components/button-group/button-group.component.js"' has no exported member 'SlButtonGroup'. Did you mean to use 'import SlButtonGroup from "../../components/button-group/button-group.component.js"' instead?
11 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
                 ~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:12:15 - error TS2614: Module '"../../components/card/card.component.js"' has no exported member 'SlCard'. Did you mean to use 'import SlCard from "../../components/card/card.component.js"' instead?
12 import type { SlCard } from "../../components/card/card.component.js";
                 ~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:13:15 - error TS2614: Module '"../../components/carousel/carousel.component.js"' has no exported member 'SlCarousel'. Did you mean to use 'import SlCarousel from "../../components/carousel/carousel.component.js"' instead?
13 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:14:15 - error TS2614: Module '"../../components/carousel-item/carousel-item.component.js"' has no exported member 'SlCarouselItem'. Did you mean to use 'import SlCarouselItem from "../../components/carousel-item/carousel-item.component.js"' instead?
14 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
                 ~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:15:15 - error TS2614: Module '"../../components/checkbox/checkbox.component.js"' has no exported member 'SlCheckbox'. Did you mean to use 'import SlCheckbox from "../../components/checkbox/checkbox.component.js"' instead?
15 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:16:15 - error TS2614: Module '"../../components/color-picker/color-picker.component.js"' has no exported member 'SlColorPicker'. Did you mean to use 'import SlColorPicker from "../../components/color-picker/color-picker.component.js"' instead?
16 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
                 ~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:17:15 - error TS2614: Module '"../../components/copy-button/copy-button.component.js"' has no exported member 'SlCopyButton'. Did you mean to use 'import SlCopyButton from "../../components/copy-button/copy-button.component.js"' instead?
17 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
                 ~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:18:15 - error TS2614: Module '"../../components/details/details.component.js"' has no exported member 'SlDetails'. Did you mean to use 'import SlDetails from "../../components/details/details.component.js"' instead?
18 import type { SlDetails } from "../../components/details/details.component.js";
                 ~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:19:15 - error TS2614: Module '"../../components/dialog/dialog.component.js"' has no exported member 'SlDialog'. Did you mean to use 'import SlDialog from "../../components/dialog/dialog.component.js"' instead?
19 import type { SlDialog } from "../../components/dialog/dialog.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:20:15 - error TS2614: Module '"../../components/divider/divider.component.js"' has no exported member 'SlDivider'. Did you mean to use 'import SlDivider from "../../components/divider/divider.component.js"' instead?
20 import type { SlDivider } from "../../components/divider/divider.component.js";
                 ~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:21:15 - error TS2614: Module '"../../components/drawer/drawer.component.js"' has no exported member 'SlDrawer'. Did you mean to use 'import SlDrawer from "../../components/drawer/drawer.component.js"' instead?
21 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:22:15 - error TS2614: Module '"../../components/dropdown/dropdown.component.js"' has no exported member 'SlDropdown'. Did you mean to use 'import SlDropdown from "../../components/dropdown/dropdown.component.js"' instead?
22 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:23:15 - error TS2614: Module '"../../components/format-bytes/format-bytes.component.js"' has no exported member 'SlFormatBytes'. Did you mean to use 'import SlFormatBytes from "../../components/format-bytes/format-bytes.component.js"' instead?
23 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
                 ~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:24:15 - error TS2614: Module '"../../components/format-date/format-date.component.js"' has no exported member 'SlFormatDate'. Did you mean to use 'import SlFormatDate from "../../components/format-date/format-date.component.js"' instead?
24 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
                 ~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:25:15 - error TS2614: Module '"../../components/icon-button/icon-button.component.js"' has no exported member 'SlIconButton'. Did you mean to use 'import SlIconButton from "../../components/icon-button/icon-button.component.js"' instead?
25 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
                 ~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:26:15 - error TS2614: Module '"../../components/format-number/format-number.component.js"' has no exported member 'SlFormatNumber'. Did you mean to use 'import SlFormatNumber from "../../components/format-number/format-number.component.js"' instead?
26 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
                 ~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:27:15 - error TS2614: Module '"../../components/icon/icon.component.js"' has no exported member 'SlIcon'. Did you mean to use 'import SlIcon from "../../components/icon/icon.component.js"' instead?
27 import type { SlIcon } from "../../components/icon/icon.component.js";
                 ~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:28:15 - error TS2614: Module '"../../components/image-comparer/image-comparer.component.js"' has no exported member 'SlImageComparer'. Did you mean to use 'import SlImageComparer from "../../components/image-comparer/image-comparer.component.js"' instead?
28 import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
                 ~~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:29:15 - error TS2614: Module '"../../components/include/include.component.js"' has no exported member 'SlInclude'. Did you mean to use 'import SlInclude from "../../components/include/include.component.js"' instead?
29 import type { SlInclude } from "../../components/include/include.component.js";
                 ~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:30:15 - error TS2614: Module '"../../components/menu/menu.component.js"' has no exported member 'SlMenu'. Did you mean to use 'import SlMenu from "../../components/menu/menu.component.js"' instead?
30 import type { SlMenu } from "../../components/menu/menu.component.js";
                 ~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:31:15 - error TS2614: Module '"../../components/menu-item/menu-item.component.js"' has no exported member 'SlMenuItem'. Did you mean to use 'import SlMenuItem from "../../components/menu-item/menu-item.component.js"' instead?
31 import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:32:15 - error TS2614: Module '"../../components/input/input.component.js"' has no exported member 'SlInput'. Did you mean to use 'import SlInput from "../../components/input/input.component.js"' instead?
32 import type { SlInput } from "../../components/input/input.component.js";
                 ~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:33:15 - error TS2614: Module '"../../components/menu-label/menu-label.component.js"' has no exported member 'SlMenuLabel'. Did you mean to use 'import SlMenuLabel from "../../components/menu-label/menu-label.component.js"' instead?
33 import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
                 ~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:34:15 - error TS2614: Module '"../../components/mutation-observer/mutation-observer.component.js"' has no exported member 'SlMutationObserver'. Did you mean to use 'import SlMutationObserver from "../../components/mutation-observer/mutation-observer.component.js"' instead?
34 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
                 ~~~~~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:35:15 - error TS2614: Module '"../../components/option/option.component.js"' has no exported member 'SlOption'. Did you mean to use 'import SlOption from "../../components/option/option.component.js"' instead?
35 import type { SlOption } from "../../components/option/option.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:36:15 - error TS2614: Module '"../../components/progress-bar/progress-bar.component.js"' has no exported member 'SlProgressBar'. Did you mean to use 'import SlProgressBar from "../../components/progress-bar/progress-bar.component.js"' instead?
36 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
                 ~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:37:15 - error TS2614: Module '"../../components/popup/popup.component.js"' has no exported member 'SlPopup'. Did you mean to use 'import SlPopup from "../../components/popup/popup.component.js"' instead?
37 import type { SlPopup } from "../../components/popup/popup.component.js";
                 ~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:38:15 - error TS2614: Module '"../../components/progress-ring/progress-ring.component.js"' has no exported member 'SlProgressRing'. Did you mean to use 'import SlProgressRing from "../../components/progress-ring/progress-ring.component.js"' instead?
38 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
                 ~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:39:15 - error TS2614: Module '"../../components/qr-code/qr-code.component.js"' has no exported member 'SlQrCode'. Did you mean to use 'import SlQrCode from "../../components/qr-code/qr-code.component.js"' instead?
39 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:40:15 - error TS2614: Module '"../../components/radio-button/radio-button.component.js"' has no exported member 'SlRadioButton'. Did you mean to use 'import SlRadioButton from "../../components/radio-button/radio-button.component.js"' instead?
40 import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
                 ~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:41:15 - error TS2614: Module '"../../components/range/range.component.js"' has no exported member 'SlRange'. Did you mean to use 'import SlRange from "../../components/range/range.component.js"' instead?
41 import type { SlRange } from "../../components/range/range.component.js";
                 ~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:42:15 - error TS2614: Module '"../../components/radio-group/radio-group.component.js"' has no exported member 'SlRadioGroup'. Did you mean to use 'import SlRadioGroup from "../../components/radio-group/radio-group.component.js"' instead?
42 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
                 ~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:43:15 - error TS2614: Module '"../../components/radio/radio.component.js"' has no exported member 'SlRadio'. Did you mean to use 'import SlRadio from "../../components/radio/radio.component.js"' instead?
43 import type { SlRadio } from "../../components/radio/radio.component.js";
                 ~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:44:15 - error TS2614: Module '"../../components/rating/rating.component.js"' has no exported member 'SlRating'. Did you mean to use 'import SlRating from "../../components/rating/rating.component.js"' instead?
44 import type { SlRating } from "../../components/rating/rating.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:45:15 - error TS2614: Module '"../../components/resize-observer/resize-observer.component.js"' has no exported member 'SlResizeObserver'. Did you mean to use 'import SlResizeObserver from "../../components/resize-observer/resize-observer.component.js"' instead?
45 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
                 ~~~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:46:15 - error TS2614: Module '"../../components/skeleton/skeleton.component.js"' has no exported member 'SlSkeleton'. Did you mean to use 'import SlSkeleton from "../../components/skeleton/skeleton.component.js"' instead?
46 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:47:15 - error TS2614: Module '"../../components/relative-time/relative-time.component.js"' has no exported member 'SlRelativeTime'. Did you mean to use 'import SlRelativeTime from "../../components/relative-time/relative-time.component.js"' instead?
47 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
                 ~~~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:48:15 - error TS2614: Module '"../../components/select/select.component.js"' has no exported member 'SlSelect'. Did you mean to use 'import SlSelect from "../../components/select/select.component.js"' instead?
48 import type { SlSelect } from "../../components/select/select.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:49:15 - error TS2614: Module '"../../components/spinner/spinner.component.js"' has no exported member 'SlSpinner'. Did you mean to use 'import SlSpinner from "../../components/spinner/spinner.component.js"' instead?
49 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
                 ~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:50:15 - error TS2614: Module '"../../components/split-panel/split-panel.component.js"' has no exported member 'SlSplitPanel'. Did you mean to use 'import SlSplitPanel from "../../components/split-panel/split-panel.component.js"' instead?
50 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
                 ~~~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:51:15 - error TS2614: Module '"../../components/switch/switch.component.js"' has no exported member 'SlSwitch'. Did you mean to use 'import SlSwitch from "../../components/switch/switch.component.js"' instead?
51 import type { SlSwitch } from "../../components/switch/switch.component.js";
                 ~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:52:15 - error TS2614: Module '"../../components/tab-group/tab-group.component.js"' has no exported member 'SlTabGroup'. Did you mean to use 'import SlTabGroup from "../../components/tab-group/tab-group.component.js"' instead?
52 import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:53:15 - error TS2614: Module '"../../components/tab/tab.component.js"' has no exported member 'SlTab'. Did you mean to use 'import SlTab from "../../components/tab/tab.component.js"' instead?
53 import type { SlTab } from "../../components/tab/tab.component.js";
                 ~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:54:15 - error TS2614: Module '"../../components/tab-panel/tab-panel.component.js"' has no exported member 'SlTabPanel'. Did you mean to use 'import SlTabPanel from "../../components/tab-panel/tab-panel.component.js"' instead?
54 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:55:15 - error TS2614: Module '"../../components/textarea/textarea.component.js"' has no exported member 'SlTextarea'. Did you mean to use 'import SlTextarea from "../../components/textarea/textarea.component.js"' instead?
55 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:56:15 - error TS2614: Module '"../../components/tooltip/tooltip.component.js"' has no exported member 'SlTooltip'. Did you mean to use 'import SlTooltip from "../../components/tooltip/tooltip.component.js"' instead?
56 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
                 ~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:57:15 - error TS2614: Module '"../../components/tree/tree.component.js"' has no exported member 'SlTree'. Did you mean to use 'import SlTree from "../../components/tree/tree.component.js"' instead?
57 import type { SlTree } from "../../components/tree/tree.component.js";
                 ~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:58:15 - error TS2614: Module '"../../components/tag/tag.component.js"' has no exported member 'SlTag'. Did you mean to use 'import SlTag from "../../components/tag/tag.component.js"' instead?
58 import type { SlTag } from "../../components/tag/tag.component.js";
                 ~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:59:15 - error TS2614: Module '"../../components/tree-item/tree-item.component.js"' has no exported member 'SlTreeItem'. Did you mean to use 'import SlTreeItem from "../../components/tree-item/tree-item.component.js"' instead?
59 import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
                 ~~~~~~~~~~
../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:60:15 - error TS2614: Module '"../../components/visually-hidden/visually-hidden.component.js"' has no exported member 'SlVisuallyHidden'. Did you mean to use 'import SlVisuallyHidden from "../../components/visually-hidden/visually-hidden.component.js"' instead?
60 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
                 ~~~~~~~~~~~~~~~~
Found 58 errors in the same file, starting at: ../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@shoelace-style/shoelace/dist/types/vue/index.d.ts:3

The errors seem correct; the generated Vue type file imports component type as named rather than default exports:
import type { SlAnimation } from "../../components/animation/animation.component.js";
but animation.componnet.js exports the component as default

import {
  SlAnimation
} from "../../chunks/chunk.6UG7QZL4.js";
import "../../chunks/chunk.XVVDUPMB.js";
import "../../chunks/chunk.TJOP7HQP.js";
import "../../chunks/chunk.2FB5TK5H.js";
import "../../chunks/chunk.TUVJKY7S.js";
import "../../chunks/chunk.TUZSOS6C.js";
import "../../chunks/chunk.IFDWM6P4.js";
export {
  SlAnimation as default
};

I did notice in our pnpm-lock the package is noted as:

 '@shoelace-style/shoelace':
        specifier: ^2.15.0
        version: 2.15.1(@types/[email protected])

To Reproduce

Steps to reproduce the behavior:

Go to '...'
Click on '...'
Scroll down to '...'
See error

Demo

If the bug isn't obvious, please provide a link to a CodePen or Fiddle with a minimal reproduction. Bugs that have repros get attention faster than those that don't.

Tip: use the CodePen button on any example in the docs!

Screenshots

If applicable, add screenshots to help explain the bug.

Browser / OS

OS: [e.g. Mac, Windows]
Browser: [e.g. Chrome, Firefox, Safari]
Browser version: [e.g. 22]

Additional information

Provide any additional information about the bug here.

KonnorRogers · 2024-06-11T03:31:03Z

KonnorRogers
Jun 11, 2024
Maintainer

What version of Vue? Do you have a reproduction I could look at by chance?

0 replies

echjordan0 · 2024-06-11T20:21:10Z

echjordan0
Jun 11, 2024
Author

What version of Vue? Do you have a reproduction I could look at by chance?

We're on Vue 2.7.14

0 replies

KonnorRogers · 2024-06-11T21:15:57Z

KonnorRogers
Jun 11, 2024
Maintainer

What version of Vue? Do you have a reproduction I could look at by chance?

We're on Vue 2.7.14

Just realized Vue version wont matter, its probably more dependent on your typescript version. What version of TypeScript are you on?

0 replies

echjordan0 · 2024-06-12T00:26:55Z

echjordan0
Jun 12, 2024
Author

What version of Vue? Do you have a reproduction I could look at by chance?

We're on Vue 2.7.14

Just realized Vue version wont matter, its probably more dependent on your typescript version. What version of TypeScript are you on?

We're on 4.6.4

 "@typescript-eslint/eslint-plugin": "^5.38.0",
 "@typescript-eslint/parser": "^5.38.0",
 "tslib": "2.3.1",
 "typescript": "4.6.4",

0 replies

JSintrinsiq · 2024-10-01T20:30:29Z

JSintrinsiq
Oct 1, 2024

I was doing some digging and it looks like the syntax being used is the "Type Only" import found here, so it is correct usage but I am wrestling with an error where TS claims it Cannot find type definition file for '@shoelace-style/shoelace/dist/types/vue' even though the index.d.ts file is there.

Possibly an issue with the declare not being exported? The only export I see is on an interface, but I'm not sure if the declared module has to be exported for the file to be "found."

I'm running TS v5.6.2

2 replies

jamesarosen Feb 8, 2025

./dist/types/vue isn't in the list of exports, so I wouldn't expect npm or tsc to resolve it. For that matter, neither are ./dist/events/* or ./dist/styles/*.

jamesarosen Feb 8, 2025

What happens if you install @shoelace-style/shoelace and then modify the package.json, adding an export for types/*?

{
  "exports": {
    // ...
    "./dist/types/*": {
      "types": "./dist/types/*.d.ts"
    },
}

This should enable tsc to resolve this declaration:

{
  "compilerOptions": {
    "types": ["@shoelace-style/shoelace/dist/types/vue"]
  }
}

jamesarosen · 2025-02-08T16:26:19Z

jamesarosen
Feb 8, 2025

On TypeScript 5.4.5, this works:

import { SlOption } from '@shoelace-style/shoelace/dist/react';

but this doesn't:

import SlOption from '@shoelace-style/shoelace/dist/react/option';

With error

Cannot find module '@shoelace-style/shoelace/dist/react/option' or its corresponding type declarations.ts(2307)

1 reply

jamesarosen Feb 8, 2025

#2370 seems to fix the issue, but I haven't tested thoroughly and there are still some inconsistencies.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Component type resolution fails including Vue types #2111

{{title}}

Replies: 6 comments 3 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Component type resolution fails including Vue types #2111

echjordan0 Jun 10, 2024

Describe the bug

To Reproduce

Demo

Screenshots

Browser / OS

Additional information

Replies: 6 comments · 3 replies

KonnorRogers Jun 11, 2024 Maintainer

echjordan0 Jun 11, 2024 Author

KonnorRogers Jun 11, 2024 Maintainer

echjordan0 Jun 12, 2024 Author

JSintrinsiq Oct 1, 2024

jamesarosen Feb 8, 2025

jamesarosen Feb 8, 2025

jamesarosen Feb 8, 2025

jamesarosen Feb 8, 2025

echjordan0
Jun 10, 2024

Replies: 6 comments 3 replies

KonnorRogers
Jun 11, 2024
Maintainer

echjordan0
Jun 11, 2024
Author

KonnorRogers
Jun 11, 2024
Maintainer

echjordan0
Jun 12, 2024
Author

JSintrinsiq
Oct 1, 2024

jamesarosen
Feb 8, 2025