component.json needs to load tsconfig.json

[KranzAklilu]

I'm bootstrapping my project with nx and we don't get a tsconfig.json at the root level. It would be nice if we could manually change the path for the tsconfig.json just like how we can change tailwind.config.js. Thanks

[julioxavierr]

+1

[brunos3d]

Basically would be useful to add more options to components.json files like tsconfigPath, so then we could use tsconfig.base.json file on nx workspaces.

Meanwhile just want to share how I managed to figure out it by now.

tsconfig.json

// This file exist only to make the shadcn-ui cli happy ¯\_(ツ)_/¯
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@od/shadcn-ui": ["libs/shadcn-ui/src/index.ts"],
      "@od/shadcn-ui/*": ["libs/shadcn-ui/src/*"]
    }
  }
}

tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom", "dom.iterable"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@landing-page/*": ["apps/landing-page/*"],
      "@od/shadcn-ui": ["libs/shadcn-ui/src/index.ts"],
      "@od/shadcn-ui/*": ["libs/shadcn-ui/src/*"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

libs/shadcn-ui/tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["node"],
    "paths": {
      "@od/shadcn-ui": ["libs/shadcn-ui/src/index.ts"],
      "@od/shadcn-ui/*": ["libs/shadcn-ui/src/*"]
    }
  },
  "files": [
    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
    "../../node_modules/@nx/react/typings/image.d.ts"
  ],
  "exclude": [
    "jest.config.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx"
  ],
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tailwind": {
    "config": "apps/landing-page/tailwind.config.js",
    "css": "apps/landing-page/styles/global.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@od/shadcn-ui/components",
    "utils": "@od/shadcn-ui/lib/utils"
  }
}

So here is how my workspace looks like

[cirdes]

In my case I don't have tsconfig at all. I'm using esbuild to compile tsx files so I don't need tsconfig

[dan5py]

In my case I don't have tsconfig at all. I'm using esbuild to compile tsx files so I don't need tsconfig

In this case you have to install the components manually or create a temporary tsconfig.

[plbstl]

I can start working on this

[mxmnci]

Any progress on this? Using nx and we don't have a tsconfig.json at the root of our project. Shadcn is unable to detect our tsconfig.base.json file.

[plbstl]

I can start working on this

I wasn't feeling well since then.

---

You can pass in a custom path for tsconfig.json using the TS_NODE_PROJECT environment variable. Just prefix your shadcn-ui commands with TS_NODE_PROJECT=<filepath>. For example:

TS_NODE_PROJECT=tsconfig.base.json pnpm dlx shadcn-ui init

@KranzAklilu @julioxavierr @brunos3d @mxmnci @matheralvs

[matheralvs]

@plbstl I really liked your alternative, however, how would the implementation of this environment variable in the project look like?

[plbstl]

@matheralvs it would be by prefixing every shadcn-ui command with the env var

[anteqkois]

@brunos3d So I suppose you created lib using nx cli like nx g @nx/next:library?

EDIT: @brunos3d I successfully setup my project thanks to your tips ♥️

[farah-u]

@anteqkois @brunos3d mind stepping through your setup? Eg what library type did you init with Nx (did you choose to do it with tailwind included), and then where did you run the shadcn CLI from to ultimately set things up? Just trying to piece together a clear guide as I'm debugging my repo. Appreciate it.

[anteqkois]

@farah-u So,

• Init NextJS app without Tailiwnd. (I added it manualy)
• Store shadnicn components in library. I have created nx React components library, deleted almost all files, and create my own. You also must export this components from library.
• Create components.json file at root project (I go through manual shadncn installation)
• Add tsconfig.json at root, (I didn't check if it works without it 😅 so you can try storing path in primary tsconfig.base.json)
• When I want to add a new component, I do it at the root with shadnicn cli

Some graphic:

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tailwind": {
    "config": "apps/web/tailwind.config.js",
    "css": "apps/web/app/global.css",
    "baseColor": "stone",
    "cssVariables": true
  },
  "aliases": {
    "components": "@x/ui-components/components",
    "utils": "@x/ui-components/lib/utils"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@x/ui-components": ["libs/ui-components/src/index.ts"],
      "@x/ui-components/*": ["libs/ui-components/src/*"]
    }
  }
}

tsconfig.lib.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["node", "next"]
  },
  "files": ["../../node_modules/@nx/react/typings/cssmodule.d.ts", "../../node_modules/@nx/next/typings/image.d.ts"],
  "exclude": [
    "jest.config.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx"
  ],
  "paths": {
    "@x/ui-components": ["libs/ui-components/src/index.ts"],
    "@x/ui-components/*": ["libs/ui-components/src/*"],
    // "@x/ui-components/server": ["libs/ui-components/src/server.ts"],
  },
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}

If you need more info, let me know 🙌

[anteqkois]

@farah-u I created a GitHub repository with shadcn UI configuration from Nx, you can check it on my profile. And I made a YouTube tutorial on how to do it (It's my first video so it's not that good but I decided to give it a try 😅).

YouTube: Setup tutorial GitHub repo: Repository Boilerplate

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.