[Bug]: In a javascript nuxt project the components are created outside of the project root folder

[hubcio2115]

Environment

Developement/Production OS: macOS 14.2.1
Node version: 20.9.0
Package manager: bun@1.0.22
Radix Vue version: 1.3.2
Shadcn Nuxt version: 0.8.7
Vue version: 3.4.14
Nuxt version: 3.9.3
Nuxt mode: universal
Nuxt target: server
CSS framework: @nuxtjs/tailwindcss@6.10.4
Client OS: macOS 14.2.1

Link to minimal reproduction

https://github.com/hubcio2115/shadcn-nuxt-minimal-reproduction

Steps to reproduce

Run

npx shadcn-vue@latest init

Describe the bug

In a fresh javascript nuxt project with default configuration folders for lib and components get created outside of the project folder. Any subsequent runs of shadcn-vue add also put components outside of the project folder.

Everything works fine in a typescript project.

Expected behavior

components and lib are added to the project and components added through cli add are also put where they suppose to be as per the shadcn configuration.

Conext & Screenshots (if applicable)

[sadeghbarati]

https://stackblitz.com/edit/github-3ryei7

Add this to your nuxt.config.js/ts even if you are JS

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        baseUrl: '.'
      }
    }
  }
})

That's strange 😕

With tsconfig.json CLI is working as expected without "baseUrl": "." in ./.nuxt/tsconfig.json

But with jsconfig.json, "baseUrl": "." must be exist in ./.nuxt/tsconfig.json

[hubcio2115]

Oh, yeah that works but when I put it in jsconfig.json instead of nuxt.config it still bugs out. So the issue remains.

[sadeghbarati]

@Dunqing Can you also check this?

It's not related to detypes error in the carousel, calendar, vue-sonner components.

I explained it above

[Dunqing]

I will take a look soon.

[AdamBD]

I had the following problem during the init phase : npx shadcn-vue@latest init

✔ Would you like to use TypeScript (recommended)? … no
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … assets/main.css
✔ Would you like to use CSS variables for colors? … no
✔ Where is your tailwind.config located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Write configuration to components.json. Proceed? … yes

✔ Writing components.json...
ENOENT: no such file or directory, stat '/jsconfig.json'

I able to solve this problem by having the following jsconfig.json file in my project root before calling

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "$schema": "https://json.schemastore.org/jsconfig.json",
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
  }
}

In the initial instructions I skipped this step, because I have a js project. :

I believe that skipping this step causes the project to not have a config file.

I would add in a solution for js projects to the documentation.

However even though the init shows successful, as pointed out here the components and lib directory are created outside of project root.

I followed @sadeghbarati suggestion of adding this to nuxt.config.ts but it didnt work.

[AdamBD]

Anyone working on this?

[RamaHerbin]

I'm encountering the same issues as @AdamBD and @hubcio2115

[educbraga]

I had no issues following the CLI suggestions:

❯ npx shadcn-vue@latest init
✔ Would you like to use TypeScript? (recommended)? … no / yes
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your tsconfig.json file? … .nuxt/tsconfig.json
✔ Where is your global CSS file? (this file will be overwritten) … assets/css/tailwind.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config located? (this file will be overwritten) … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Write configuration to components.json. Proceed? … yes

Following the suggestions in the documentation item 7, the components are created outside of the project root folder:

[sugoidesune]

This fixed iit for me

npx shadcn-vue@0.10.4 add tabs

[gormal]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

[AdamBD]

This fixed iit for me

npx shadcn-vue@0.10.4 add tabs

how does this help with the components and lib directories being created outside of project root?

[AdamBD]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

this bug is related to JS installations, not TS

[sugoidesune]

This fixed iit for me

npx shadcn-vue@0.10.4 add tabs

how does this help with the components and lib directories being created outside of project root?

Because the bug was introduced with shadcn-vue@0.10.5 so using shadcn-vue@0.10.4 works.

[sugoidesune]

this bug is related to JS installations, not TS

Definitely also exists in TS with shadcn-vue@0.10.5

[nulfrost]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

yep this fixed it for me whe using nuxt, I guess during the init steps you need to point inside of the .nuxt folder instead of the root tsconfig

[Erel0]

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        baseUrl: '.'
      }
    }
  }
})

Then npx shadcn-vue@latest init

[ThamNithi]

I found that the component has just loaded to /.nuxt/components/ui/ so you've just copied and pasted it in the right path.

[murshex]

@zernonia Please fix this

[lukaspodmelle]

Still persists. However this in fact fixed it for me, so thank you @gormal :

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

[realcryptopunk]

I have Nuxt/TS project and this change in components.json fixed it for me. "tsConfigPath": "tsconfig.json" -> "tsConfigPath": "./.nuxt/tsconfig.json",

Hey I've used this fix but this adds a folder named "*" everytime

[xak2000]

I think the root cause of this issue is dividab/tsconfig-paths#265.

The ./tsconfig.json file in a Nuxt project usually extends from .nuxt/tsconfig.json like this:

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

The loadConfig function from tsconfig-paths library respects extends property, but it doesn't respect the fact that some of the resolved relative paths (or all of them in this case) will be relative not to the root tsconfig.json (the file, passed as an argument to loadConfig), but to the tsconfig.json where these paths were gathered from (in case baseUrl is absent, that is the case for a Nuxt project by default).

The TypeScript docs says about the paths property:

A series of entries which re-map imports to lookup locations relative to the baseUrl if set, or to the tsconfig file itself otherwise.

(emphasis is mine).

Thus, for each relative path loaded not from the root tsconfig.json but from the parent tsconfig.json, loadConfig would have to modify that path using the difference between the path of the root tsconfig.json (specified as an argument) and the currently processed tsconfig.json.

For example if the root file is ./tsconfig.json that extends from .nuxt/tsconfig.json and .nuxt/tsconfig.json contains

"paths": {
      "~": [
        ".."
      ],
}

then paths returned from loadConfig should be { "~": [".nuxt/.."] } instead of { "~": [".."] }.

In this case resolving this path to the path of the root ./tsconfig.json should give the correct result.

E.g. for a project like this:

/home
|-- my-nuxt-app
  |-- tsconfig.json
  |-- .nuxt
    |-- tsconfig.json

calling loadConfig('/home/my-nuxt-app/tsconfig.json') will correctly return

{
  "paths": {
    "~": [".nuxt/.."]
    // ...
  }
}

This relative path after resolving to /home/my-nuxt-app will be correctly resolved to /home/my-nuxt-app/.nuxt/.. that means just /home/my-nuxt-app if we remove redundant parts.

But currently loadConfig('/home/my-nuxt-app/tsconfig.json') returns:

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

That means that the final path will be /home/my-nuxt-app/.., that is obviously incorrect.

Workarounds

Either add baseUrl to ./tsconfig.json or directly specify .nuxt/tsconfig.json instead ./tsconfig.json as an argument of loadConfig.

Both are not truly "correct" solutions as:

• Pointing baseUrl to .nuxt directory makes tricky to use compilerOptions.paths in the base ./tsconfig.json. Every entry in this file needs to be relative to .nuxt directory too, that is counter-intuitive.
• Specifying .nuxt/tsconfig.json directly makes base ./tsconfig.json to be ignored, which could be or could not be a problem depending on the internal implementation of shadcn-vue init and on the contents of compilerOptions.paths of base ./tsconfig.json.

[sadeghbarati]

Replacing tsconfig-paths with get-tsconfig , will solve this issue, and hopefully shadcn-svelte is using it too

Nuxt: https://stackblitz.com/edit/github-j46xhz Vite: https://stackblitz.com/edit/vitejs-vite-ew1qvf