Closed michaelreinhard1 closed 1 week ago
You are using Nuxt compatibilityVersion 4 so, shadcn-nuxt
default componentDir must change
- componentDir: './components/ui',
+ componentDir: './app/components/ui',
You are using Nuxt compatibilityVersion 4 so,
shadcn-nuxt
default componentDir must change- componentDir: './components/ui', + componentDir: './app/components/ui',
Thank you! Makes sense, where should I change this? Which file? Can't seem to find it.
in nuxt.config.ts
shadcn options
in
nuxt.config.ts
shadcn options
Thank you so much for helping me! I changed the componentDir path. Locally I don't have the "Two component files resolving to the same name" and "ENOENT: no such file or directory, scandir" warnings anymore.
However on production I still have this "ENOENT: no such file or directory"
Here is my nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxthub/core',
'nuxt-auth-utils',
'@nuxt/eslint',
'@nuxt/image',
'@vueuse/nuxt',
'@nuxt/fonts',
'@nuxtjs/tailwindcss',
'shadcn-nuxt',
'@nuxtjs/color-mode',
'@nuxt/icon'
],
imports: {
dirs: [
'../shared/utils',
'../shared/types',
'../shared/constants'
]
},
devtools: {
enabled: true
},
colorMode: {
// preference: 'dark',
classSuffix: ''
},
runtimeConfig: {
oauth: {
// provider in lowercase (gitHub, google, etc.)
spotify: {
clientId: process.env.NUXT_OAUTH_SPOTIFY_CLIENT_ID,
clientSecret: process.env.NUXT_OAUTH_SPOTIFY_CLIENT_SECRET,
scope: [
'playlist-modify-public',
'playlist-read-collaborative',
'playlist-modify-private',
'user-read-email'
]
}
},
// The private keys which are only available within server-side
logsnagToken: '',
logsnagProject: '',
plunkApiKey: '',
stripeWebhookSecret: '',
stripeSecretKey: '',
stripeProductFree: '',
stripeProductCuratorMonthly: '',
stripeProductCuratorYearly: '',
stripeProductPro: '',
stripeProductProMonthly: '',
stripeProductProYearly: '',
stripeProductPayAsYouGo: '',
paddleApiKey: '',
paddle: {
api_key: process.env.NUXT_PADDLE_API_KEY
},
// Keys within public, will be also exposed to the client-side
public: {
paddleVendorId: ''
}
},
// nuxt.config.ts
future: {
compatibilityVersion: 4
},
compatibilityDate: '2024-07-30',
nitro: {
imports: {
dirs: [
'../shared/utils',
'../shared/types',
'../shared/constants'
]
}
},
hub: {
database: true
},
// Development config
eslint: {
config: {
stylistic: {
quotes: 'single',
commaDangle: 'never'
}
}
},
shadcn: {
componentDir: './app/components/ui'
}
})
My app structure:
Have I configured this correctly? It looks like on production the path is still incorrect. Thanks in advance!
Check this
https://stackblitz.com/edit/github-i4vsqf-zqyf8d?file=nuxt.config.ts
Thank you! I appreciate it. This removed all the warnings locally! :) But unfortunately still getting the same build error on production...
Thanks in advance!
Update:
Hi! I did a clean install of Nuxt, shadcn-vue and everything else and now the build error in production is gone. I'm not sure what the issue was but your advice solved it! Thanks! 😊
Reproduction
https://stackblitz.com/edit/github-i4vsqf?file=app%2Fpages%2Fsettings%2Fnotifications.vue
Describe the bug
EDIT: Right after writing this I thought of something that could help. I was using some components from
~/lib/registry/new-york/ui
. This was someting I copied from shadcn-vue examples I believe. I removed all the components from~/lib/registry/new-york/ui
and then noticed this warning:Maybe this warning was there all the time but I didn't catch it. Is this because I'm using the
/app
folder structure?Hi, I’m unable to deploy my Nuxt project to production using shadcn-vue. I tried both Cloudflare Pages using Nuxthub and Vercel. In development mode, I’m getting the following warnings for every component
During production deployment, I consistently receive this error:
Initially I imported the component like said in the docs:
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
After the build errors I tried using different import method like this:
I'm using Nuxt with the
/app
folder:Here’s my
components.json
:The
@/
alias works for components, but I had to use~/
for utils or the utils couldnt be found I tried both@
and~
for components imports but the error persists.Can someone help me understand if the
/app
folder structure is causing these issues, or if I’m doing something else wrong? Thanks in advance!System Info
Contributes