Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: (Next) shadcn-vue@next add xxx adds component to parent folder #984

Open
2 tasks
ZTL-UwU opened this issue Jan 2, 2025 · 1 comment
Open
2 tasks
Labels
bug Something isn't working

Comments

@ZTL-UwU
Copy link
Contributor

ZTL-UwU commented Jan 2, 2025

Reproduction

https://stackblitz.com/~/github.com/ZTL-UwU/starters (in the /nuxt/shadcn-next/ folder)

Describe the bug

In the next version of the CLI (#917), components are added to the parent folder.

starters/
└── nuxt/
    ├── shadcn-next/
    │   └── app/
    │       └── should be added here
    └── app/
        └── got added here instead

Problem

"components": "@/components",

@ is resolved to ../app which should have been ./app.

export async function getTsConfigAliasPrefix(cwd: string) {
const isTypescript = await isTypeScriptProject(cwd)
const tsconfigType = isTypescript ? 'tsconfig.json' : 'jsconfig.json'
const tsConfig = await getTSConfig(cwd, tsconfigType)
// This assume that the first alias is the prefix.
for (const [alias, paths] of Object.entries(tsConfig.path)) {
if (
paths.includes('./*')
|| paths.includes('./src/*')
|| paths.includes('./app/*')
|| paths.includes('./resources/js/*') // Laravel.
) {
const cleanAlias = alias.replace(/\/\*$/, '') ?? null
// handle Nuxt
return cleanAlias === '#build' ? '@' : cleanAlias
}
}
// Use the first alias as the prefix.
return Object.keys(tsConfig?.path)?.[0].replace(/\/\*$/, '') ?? null
}

The CLI reads the tsconfig which is in ./.nuxt.

{
  "compilerOptions": {
    "paths": {
      "@": [
        "../app"
      ],

shadcn-vue@next add

starters/nuxt/shadcn-next on  main via 🥟 v1.1.42 via  v22.9.0 took 2s 
❯ bunx shadcn-vue@next add button
✔ Checking registry.
⠋ Installing dependencies.bun add v1.1.42 (50eec002)

$ nuxt prepare
⠦ Installing dependencies.ℹ Using Tailwind CSS from ~/global.css                                                                                                                                        nuxt:tailwindcss 1:35:57 PM
⠦ Installing dependencies.ℹ Nuxt Icon server bundle mode is set to local                                                                                                                                                 1:35:58 PM
⠇ Installing dependencies.ℹ Running with compatibility version 4                                                                                                                                                         1:35:59 PM
⠹ Installing dependencies.✔ Types generated in .nuxt                                                                                                                                                                     1:36:00 PM
⠏ Installing dependencies.
installed [email protected]
installed [email protected]
installed [email protected]

[7.94s] done
✔ Installing dependencies.
✔ The folder button already exists. Would you like to overwrite? … no
✔ Created 1 file:
  - ../app/lib/utils.ts                                                                                                                                                                         1:36:07 PM
ℹ Skipped 2 files:
  - ../app/components/ui/button/Button.vue                                                                                                                                                      1:36:07 PM
  - ../app/components/ui/button/index.ts                                                                                                                                                        1:36:07 PM

shadcn-vue@next info

starters/nuxt/shadcn-next on  main via 🥟 v1.1.42 via  v22.9.0 took 2s 
❯ bunx shadcn-vue@next info
> project info                                                                                                                                                                                  1:27:44 PM
{ framework:                                                                                                                                                                                    1:27:44 PM
   { name: 'nuxt',
     label: 'Nuxt',
     links:
      { installation: 'https://shadcn-vue.com/docs/installation/nuxt',
        tailwind: 'https://tailwindcss.com/docs/guides/nuxtjs' } },
  typescript: true,
  tailwindConfigFile: 'tailwind.config.ts',
  tailwindCssFile: 'app/global.css',
  aliasPrefix: '@' }
                                                                                                                                                                                                1:27:44 PM
> components.json                                                                                                                                                                               1:27:44 PM
{ '$schema': 'https://shadcn-vue.com/schema.json',                                                                                                                                              1:27:44 PM
  style: 'new-york',
  typescript: true,
  tailwind:
   { config: 'tailwind.config.ts',
     css: 'app/global.css',
     baseColor: 'zinc',
     cssVariables: true,
     prefix: '' },
  aliases:
   { components: '@/components',
     utils: '@/lib/utils',
     ui: '@/components/ui',
     lib: '@/lib' },
  iconLibrary: 'lucide',
  resolvedPaths:
   { cwd: '/home/ztluwu/Dev/starters/nuxt/shadcn-next',
     tailwindConfig: '/home/ztluwu/Dev/starters/nuxt/shadcn-next/tailwind.config.ts',
     tailwindCss: '/home/ztluwu/Dev/starters/nuxt/shadcn-next/app/global.css',
     utils: '/home/ztluwu/Dev/starters/nuxt/app/lib/utils',
     components: '/home/ztluwu/Dev/starters/nuxt/app/components',
     lib: '/home/ztluwu/Dev/starters/nuxt/app/lib',
     ui: '/home/ztluwu/Dev/starters/nuxt/app/components/ui' } }

Also, this can't be solved with the old solution.

  typescript: {
    tsConfig: {
      compilerOptions: {
        baseUrl: '.',
      },
    },
  },

System Info

System:
    OS: Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 6.62 GB / 14.82 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.9.0/bin/yarn
    npm: 11.0.0 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: 9.15.1 - ~/.local/share/pnpm/pnpm
    bun: 1.1.42 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.85
  npmPackages:
    @vueuse/core: ^12.2.0 => 12.2.0 
    nuxt: ^3.15.0 => 3.15.0 
    shadcn-nuxt: ^1.0.0-next.0 => 1.0.0-next.0 
    vue: latest => 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
@ZTL-UwU ZTL-UwU added the bug Something isn't working label Jan 2, 2025
@sadeghbarati
Copy link
Collaborator

Hi @ZTL-UwU

There are some new changes in CLI which have still not been released on npm

refactor: use get-tsconfig instead of tsconfig-paths

After this, the issue must be resolved, I'll try to add pkg.pr.new capability to shadcn-vue PR so we could test the PR out before it is released on npm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants