Installing shadcn/ui on Remix project without TypeScript

[tjhoo]

Hi,

I have manually create a Remix project without TypeScript.

1. Follow the steps here to install Remix manually.
2. Follow the steps here to install Tailwind CSS.

then I encounter this error when trying to install shadcn/ui

$ pnpm dlx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Remix.
✔ Validating Tailwind CSS.
✖ Validating import alias.

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

It seems that shadcn/ui is looking for tsconfig.json. May I know how to install shadcn/ui without TypeScript?

To reproduce this issue, extract the attached my-remix-app.tar.gz then,

1. pnpm install
2. pnpm dlx shadcn@latest init

[thnkxgod]

Hi I have manually create a Remix project without TypeScript. I encounter this error when trying to install shadcn/ui

$ pnpm dlx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Remix.
✔ Validating Tailwind CSS.
✖ Validating import alias.

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

It seems that shadcn/ui is looking for tsconfig.json. May I know how to install shadcn/ui without TypeScript?

bro.. have got any solution ??? please notify me... i also facing the same issue

[tjhoo]

I got it working by creating jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./*"]
    }
  }
}

then install shadcn/ui using pnpm dlx shadcn@latest init

That also means, either tsconfig.json orjsconfig.json is mandatory before installing shadcn/ui.

[ptlmay25]

I got it working with follow the following steps

Step 1 - Create Remix project with JavaScript using CLI command

npx create-remix@latest --template remix-run/remix/templates/remix-javascript

Step 2 - create jsconfig.json in the root folder and add following code

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

Step 3 - Add path resolver to your vite.config.js file

 resolve: {
    alias: {
      "~": path.resolve(__dirname, "./app"), // Adjust the path according to your project's structure
    },
  },

Your vite.config.js file should look like this

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
  ],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./app"), // Adjust the path according to your project's structure
    },
  },
});

Step 4 - Install shadcn-ui with running CLI command

npx shadcn@latest init

Step 5 - Add shadcn-ui component for this example we are using Button component

npx shadcn@latest add button

Step 6 - Import any shadcn-ui button component or any other component in to your file

import { Button } from "~/components/ui/button";

export const meta = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <>
      <Button className="bg-red-500">Click me</Button>
    </>
  );
}

This it enjoy coding.