search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
72.43k stars 4.39k forks source link

[bug]: Laravel New CLI ignores aliases / Components are installed in the wrong directory #5433

Open ivan-plotnikov opened 2 days ago

ivan-plotnikov commented 2 days ago

Describe the bug

The old version of the CLI installed my components correctly, in the resources/js/components folder In the new version, no matter what I change, components are ALWAYS installed in components/ui in the root of the project. Changing the aliases does not affect anything. I created a new Laravel application following the instructions in the documentation, and it has the same behavior.

What is particularly mind-blowing is that if you create a src folder in the root of the project, it will always install components there, even though I have not specified this folder as a path/alias anywhere.

Installing with the --path option also fails.

Expected behavior: components are installed in resources/js/components/ui folder Current behavior: components are installed in the components/ui folder

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "resources/css/app.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "jsx": "react-jsx",
        "strict": true,
        "isolatedModules": true,
        "target": "ESNext",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "skipLibCheck": true,
        "noEmit": true,
        "paths": {
            "@/*": ["./resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"]
}

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            refresh: true,
        }),
        react(),
    ],
});

Installation log: plotnikov@MacBook-Air-Ivan my-app % npx shadcn init Need to install the following packages: shadcn@2.1.0 Ok to proceed? (y) y

✔ Preflight checks. ✔ Verifying framework. Found Laravel. ✔ Validating Tailwind CSS. ✔ Validating import alias. ✔ Which style would you like to use? › Default ✔ Which color would you like to use as the base color? › Zinc ✔ Would you like to use CSS variables for theming? … no / yes ✔ Writing components.json. ✔ Checking registry. ✔ Updating tailwind.config.js ✔ Updating resources/css/app.css ✔ Installing dependencies. ✔ Created 1 file:

Success! Project initialization completed. You may now add components.

Affected component/components

All components

How to reproduce

1) Install new Laravel App by docs 2) Add any component, e.g. npx shadcn@latest add button

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

macOS 15.0, node v22.9.0

Before submitting

spennyp commented 2 days ago

Seeing the same issue

gera919 commented 2 days ago

Same issue here

treppilk commented 2 days ago

+1

ivan-plotnikov commented 2 days ago

Look like similar issue #5436

ivan-plotnikov commented 2 days ago

At least on September 3, it worked correctly https://x.com/shadcn/status/1830955101265305963?s=46

rahmat-dev commented 2 days ago

+1

even when I running init command, the utils.ts file is created on ./lib/utils.ts not ./resources/js/lib/utils.ts

vffuunnyy commented 1 day ago

+1

Boendestodet commented 1 day ago

+1

muhammadaldan commented 1 day ago

+1

hallwack commented 1 day ago

+1

dscamargo commented 1 day ago

+1

mmmoli commented 1 day ago

+1

MrBisbis631 commented 1 day ago

+1

tobiaswendling commented 20 hours ago

+1

Cedrickkk commented 18 hours ago

+1

lucasfeliciano commented 16 hours ago

If I clone the repo and run the tests, some tests fails. Coincidently it is related to file paths.

image

On top of that the getRegistryItemFileTargetPath function from packages/shadcn/src/utils/registry/index.ts is not being tested at all.

This function is used on packages/shadcn/src/utils/updaters/update-files.ts, which is used on packages/shadcn/src/utils/add-components.ts, and finally on packages/shadcn/src/commands/add.ts

Which is exactly the command that we are experiencing issues.

First time looking at this code base and I didn't investigated in depth, but it seems relevant enough to share the findings.

youssefhussein commented 15 hours ago

+1

BRING THE OLD CLI BACKK

lucasfeliciano commented 15 hours ago

I think I found the issue and it's not related with my comment above.

Bug

The filePath and targetDir is being overwritten here on lines 74 and 75:

https://github.com/shadcn-ui/ui/blob/3259fb7ca165b0ae11124257a20b71001049ecca/packages/shadcn/src/utils/updaters/update-files.ts#L69-L76

On line 69 and 71 the targetDir and filePath respectively, are what we expect based in the aliases on components.json!

The file.target on line 74 comes from the registry. For example, for the Alert component see the following url: https://ui.shadcn.com/r/styles/default/alert.json

Response from URL above:

{
  "name": "alert",
  "type": "registry:ui",
  "files": [
    {
      "path": "ui/alert.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
      "type": "registry:ui",
      "target": "components/ui/alert.tsx"
    }
  ]
}

Solution

I believe that removing the following if statement would fix it, and I can confirm that it works.

https://github.com/shadcn-ui/ui/blob/3259fb7ca165b0ae11124257a20b71001049ecca/packages/shadcn/src/utils/updaters/update-files.ts#L73-L76

However, since I don't fully understand the use case, it is hard for me to know for sure if that's the way or if it will add any other bug.

Before removing respective lines (does not respect the aliases): image

After removing the respective lines (respect the aliases): image

My components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "~/app/_components",
    "utils": "~/lib/styles",
    "ui": "~/app/_components/ui",
    "lib": "~/lib",
    "hooks": "~/hooks"
  }
}

It would be necessary to understand the business rules for this scenario.

For example:

I could create a PR to fix this, but I need some input on the questions above. Maybe @shadcn could help clarifying some of the questions? 🙏

stekatag commented 14 hours ago

Same issue as well. The new CLI completely ignores the aliases.

Borcioo commented 9 hours ago

+1

jpkontreras commented 8 hours ago

im just a dev in a sunday wanting this to work 😭

matheuspegorari commented 6 hours ago

I'm new to shadcn and just started using today, and I'm having this issue with brand new next-app (its replicable)

And it does not makes sense with current docs. image

image https://ui.shadcn.com/docs/components-json