Pre-transform error when trying to import component in playground

[ISOR3X]

When running the playground and importing a component such as Button, I get the following error:
Pre-transform error: Failed to load url /src/lib/utils. My project is structured as can be seen below.

I figure it is related to the fact that shadcn-vue also uses @ for importing components, but I am not sure. I have added the vite configs from both projects for reference. If any further info is required for solving this problem please let me know.

vite.config.mts.core.txt
vite.config.mts.playground.txt

[ISOR3X]

Refer to shadcn on how the tsconfig is configured

[skirtles-code]

Not sure yet exactly what the issue is, but it seems to work if I change this:

import { cn } from '@/lib/utils'

to this:

import { cn } from '@/lib/utils.ts'

This is a workaround, I'll need to investigate further to find a proper fix. I suspect the problem is with the customResolver.

[skirtles-code]

I've opened #8, which should fix the original error.

While that fixes the problem from Vite's perspective, the type-check command will still fail for the playground and docs packages. I'm currently unclear how to fix that, but I will investigate further. In practice, aliases won't really be usable until both problems are fixed.

I've also spent some time adding an option to configure Tailwind. That'll be a separate PR. I mostly have it working but there are still a few glitches to iron out with docs integration.

[ISOR3X]

Hey, sorry to resurrect this discussion but I still seem to have an issue related to this.

While it is no longer a pre-transform error, I now get this error:

[plugin:vite:import-analysis] Failed to resolve import "@/lib/utils.ts" from "../ui-components/src/components/ui/button/Button.vue". Does the file exist?

C:/Users/ISOR3X/WebstormProjects/ui-components/packages/ui-components/src/components/ui/button/Button.vue:4:19

13 |  import { defineComponent as _defineComponent } from "vue";
14 |  import { Primitive } from "reka-ui";
15 |  import { cn } from "@/lib/utils.ts";

Reproduction steps:

1. Create new create-vue-lib with the following options:
   √ Package name: @name/pkg-name
   √ Target directory: pkg-name
   √ Use 'packages' directory?: Yes
   √ Main package directory: pkg-name
   √ Global variable name:PkgName
   √ GitHub path (optional) ...
   √ Include Tailwind CSS?: Yes
   √ Include ESLint?: Yes
   √ Include ESLint Stylistic for formatting?: Yes
   √ Include Vitest for testing?: No
   √ Include VitePress for documentation?: No
   √ Include playground application for development?: Yes
   √ Include GitHub CI configuration?: No
   √ Include example code?: Yes
   √ Configure @ as an alias for src?: Yes
   √ Configure global TEST variable?: No
2. Follow steps 3 to 7 from shadcn/vue: https://www.shadcn-vue.com/docs/installation/vite.html
3. Run the playground with pnpm run dev from workspace root. Importing a shadncd/vue component should not be required for the error to show.

Either way glad to have tailwind support added by default!

[skirtles-code]

I haven't been able to reproduce this.

You should skip step 5, Update vite.config.ts in the shadcn/vue instructions, but it seems to work for me either way.

What version of Node are you using?

It could also be a Windows-specific problem. I'll need to check that too.

[ISOR3X]

I'm using Node v22.14.0.

I have created a repo that has the issue: https://github.com/ISOR3X/ui-components

Would you mind checking if you don't have the issue there as well?

[skirtles-code]

I have managed to reproduce the error using Windows, Node 22.14.0 and the repo you provided. I'm not yet clear exactly what combination of factors leads to the problem, but that same repo works fine in other environments. I'll keep investigating.