[bug]: Components installed to wrong directory Remix

[pjosxyz]

Describe the bug

Components not being installed to location defined in component.json. Instead a components folder in the root directory is being created.

components.json

  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils",
    "ui": "~/components/ui",
    "lib": "~/lib",
    "hooks": "~/hooks"
  }

tsconfig.json

    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

Affected component/components

All

How to reproduce

Followed steps described here https://ui.shadcn.com/docs/installation/remix

Codesandbox/StackBlitz link

https://stackblitz.com/edit/remix-run-remix-c99tma?file=tailwind.config.ts

Logs

No response

System Info

ProductName:        macOS
ProductVersion:     14.6.1
BuildVersion:       23G9

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[mjjabarullah]

The same issue for me when adding components. It should be added inside app folder instead components added in root folder

[sadbytes]

Facing the same issue in Laravel, it should be installed in ./resouces/js/components/ui but instead it's installing in ./components/ui/.

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,
        "baseUrl": ".",
        "paths": {
            "@/*": ["./resources/js/*"],
            "@images/*": ["./resources/images/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"]
}

components.json

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

[omsrg]

having the same issue with remix

[muhammadaldan]

having same issue with laravel ,I've tried making a new project, but the new init still doesn't work, I think this is related to the sidebar update? Yesterday it was still okay

[shavonn]

Same same

[vaneworks]

Same issue, but for Vite project (TanStack Start). The hooks directory is also getting installed to the root folder.

[jacobtipp]

Same issue in my nextjs app, it worked fine a few weeks ago and I've made no changes to my config.

components should be added to ./src/shared/components/ but instead are added to ./src/components/

// components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/shared/components",
    "utils": "@/shared/utils"
  }
}

//tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitReturns": false,
    "noImplicitOverride": true,
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "src/lib/server/error-handlers"
  ],
  "exclude": ["node_modules"]
}

[MaximePremont]

Hello, I'm having the same issue with Next too.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "paths": {
      "@/*": ["./renderer/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"],
  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"]
}

// components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "@/tailwind.config.js",
    "css": "@/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

[rachhen]

The issue for me with remix

[lucasfeliciano]

See https://github.com/shadcn-ui/ui/issues/5433#issuecomment-2425131609 for more info about the bug

[bakikucukcakiroglu]

Yes, I'm facing the same issue. It was working well 1 week ago, I didin't change anything. [Remix]

[VerioN1]

me too

[shmuli9]

Urgh, this sucked up 2 hours of my life... Same issue and cant seem to find a fix

Using shadcn-ui@0.8.0 works as expected though

(in my case I have aliases for my main app: "~/*": ["./app/*"], and "@/*": ["./app/shadcn/*"])

[shmuli9]

Not sure, but wondering whether another issue I am running into is related?

If i set my tsconfig like so:

"paths": {
  "@/*": ["./app/shadcn/*"]
},

and run npx shadcn@latest init, I get this error:

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✖ Validating import alias.

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.