[Bug]: Error using Drawer component in Vite targeting ES2022

[ATMunn]

Reproduction

https://stackblitz.com/edit/shadcn-drawer-bug?file=tsconfig.json

Describe the bug

After installing the drawer component and adding it to my page, Vite gave me the following error:

11:39:23 AM [vite] (client) Pre-transform error: [@vue/compiler-sfc] Failed to resolve import source "radix-vue".

C:/Users/x/Projects/drawer-bug/drawer-bug/node_modules/vaul-vue/dist/index.d.ts
3  |  import DrawerOverlay from "./DrawerOverlay";
4  |  import DrawerContent from "./DrawerContent";
5  |  export type { DrawerRootEmits, DrawerRootProps, } from './controls';
   |                                            ^^^^^^^^^^^^^^^^^^^^^^
6  |  export type { SnapPoint, DrawerDirection, } from './types';
7  |  export { DrawerRoot, DrawerRootNested, DrawerOverlay, DrawerContent, };
  Plugin: vite:vue
  File: C:/Users/x/Projects/drawer-bug/drawer-bug/src/components/ui/drawer/DrawerDescription.vue
11:39:23 AM [vite] (client) Pre-transform error: [@vue/compiler-sfc] Failed to resolve import source "radix-vue".

C:/Users/x/Projects/drawer-bug/drawer-bug/node_modules/vaul-vue/dist/index.d.ts
3  |  import DrawerOverlay from "./DrawerOverlay";
4  |  import DrawerContent from "./DrawerContent";
5  |  export type { DrawerRootEmits, DrawerRootProps, } from './controls';
   |                                ^^^^^^^^^^^^^^^^
6  |  export type { SnapPoint, DrawerDirection, } from './types';
7  |  export { DrawerRoot, DrawerRootNested, DrawerOverlay, DrawerContent, };
  Plugin: vite:vue
  File: C:/Users/x/Projects/drawer-bug/drawer-bug/src/components/ui/drawer/DrawerTitle.vue
11:39:23 AM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve import source "radix-vue".

C:/Users/x/Projects/drawer-bug/drawer-bug/node_modules/vaul-vue/dist/index.d.ts
3  |  import DrawerOverlay from "./DrawerOverlay";
4  |  import DrawerContent from "./DrawerContent";
5  |  export type { DrawerRootEmits, DrawerRootProps, } from './controls';
   |                                            ^^^^^^^^^^^^^^^^^^^^^^
6  |  export type { SnapPoint, DrawerDirection, } from './types';
7  |  export { DrawerRoot, DrawerRootNested, DrawerOverlay, DrawerContent, };
  Plugin: vite:vue
  File: C:/Users/x/Projects/drawer-bug/drawer-bug/src/components/ui/drawer/DrawerDescription.vue
      at ScriptCompileContext.error (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:19741:11)
      at importSourceToScope (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22626:16)
      at resolveTypeFromImport (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22579:23)
      at innerResolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22466:14)
      at resolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22454:20)
      at resolveTypeFromImport (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22580:10)
      at innerResolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22466:14)
      at resolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22454:20)
      at innerResolveTypeElements (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22055:24)
      at resolveTypeElements (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:21995:20)
11:39:24 AM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve import source "radix-vue".

C:/Users/x/Projects/drawer-bug/drawer-bug/node_modules/vaul-vue/dist/index.d.ts
3  |  import DrawerOverlay from "./DrawerOverlay";
4  |  import DrawerContent from "./DrawerContent";
5  |  export type { DrawerRootEmits, DrawerRootProps, } from './controls';
   |                                ^^^^^^^^^^^^^^^^
6  |  export type { SnapPoint, DrawerDirection, } from './types';
7  |  export { DrawerRoot, DrawerRootNested, DrawerOverlay, DrawerContent, };
  Plugin: vite:vue
  File: C:/Users/x/Projects/drawer-bug/drawer-bug/src/components/ui/drawer/DrawerTitle.vue
      at ScriptCompileContext.error (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:19741:11)
      at importSourceToScope (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22626:16)
      at resolveTypeFromImport (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22579:23)
      at innerResolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22466:14)
      at resolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22454:20)
      at resolveTypeFromImport (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22580:10)
      at innerResolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22466:14)
      at resolveTypeReference (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22454:20)
      at innerResolveTypeElements (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22055:24)
      at resolveTypeElements (C:\Users\x\Projects\drawer-bug\drawer-bug\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:21995:20)

After hours of desperate searching and hair-pulling, I discovered that my tsconfig.json had "target": "es2022" set in compilerOptions. Sure enough, removing that line caused the error to go away. I don't exactly remember why I had set it to es2022 in the first place, but regardless, that was the source of the issue.

The StackBlitz reproduction does not give exactly the same error message, but it behaves the same way regardless. The error message posted here was obtained after creating a new Vue project with npm create vue@latest, following the shadcn setup instructions, installing Drawer, and changing tsconfig.json.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11390H @ 3.40GHz
    Memory: 1.95 GB / 15.74 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    radix-vue: ^1.9.11 => 1.9.11
    vue: ^3.5.13 => 3.5.13

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests