TS2742: The inferred type of '__VLS_component' cannot be named without a reference to '../../../../node_modules/radix-vue/dist/DismissableLayer'

[samupl]

Hello there,

I'm not sure if this qualifies as a bug - this might be something wrong with my setup.

I'm trying to build a simple internal component library using shadcn-vue. I have a fairly simple setup, basically just a few components from shadcn without any modification yet.

I'm trying to build a library target. If I run build-only the app builds "fine" - as in it's completely usable, I can import it in my other projects.

The issue is when I try to use yarn build, as it seems to fail in the type checking. This is reproducible by running both yarn build and yarn type-check:

❯ yarn type-check
yarn run v1.22.22
$ vue-tsc --build
src/components/ui/sheet/SheetContent.vue:220:7 - error TS2742: The inferred type of '__VLS_component' cannot be named without a reference to '../../../../node_modules/radix-vue/dist/DismissableLayer'. This is likely not portable. A type annotation is necessary.

220 const __VLS_component = (await import('vue')).defineComponent({
          ~~~~~~~~~~~~~~~

src/components/ui/sheet/SheetContent.vue:220:7 - error TS2742: The inferred type of '__VLS_component' cannot be named without a reference to '../../../../node_modules/radix-vue/dist/DismissableLayer'. This is likely not portable. A type annotation is necessary.

220 const __VLS_component = (await import('vue')).defineComponent({
          ~~~~~~~~~~~~~~~


Found 2 errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This happens on a lot of components that I have from shadcn. I created a sample repository that reproduces the issue - basically a copy of my library, just with only one component - the sheet.

Links:

• Stackblitz: https://stackblitz.com/~/github.com/samupl/shadcn-vue-type-error-reproduction
• Repo: https://github.com/samupl/shadcn-vue-type-error-reproduction

I would greatly appreciate any help. I would love to understand what I did wrong and how did I end up with this error.

[samupl]

Small update: I noticed that removing ./tsconfig.app.json and ./tsconfig.vitest.json from tsconfig.json resolve the issue, so whatever is configured incorrectly must be wrong in these files

In tsconfig.vitest.json doing the following change fixed the issue:

diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
index 571995d..f29bf66 100644
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
@@ -6,6 +6,6 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",

     "lib": [],
-    "types": ["node", "jsdom"]
+    "types": ["node"]
   }
 }

Along with the following change in tsconfig.app.json fixes the type issue permanently:

diff --git a/tsconfig.app.json b/tsconfig.app.json
index 93f952f..25a0e9f 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,7 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    "composite": true,
+    "composite": false,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

     "paths": {

But that's most likely not the right fix to the problem