Failed to resolve nested component

[edanweis]

This was working fine until today - Now I am getting warnings

[Vue warn]: Failed to resolve component: UiCommandList If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. [Vue warn]: Component is missing template or render function.

In console,

Hydration completed but contains mismatches

For some reason, if I rename the subfolder components/Ui instead of components/UI the nested components resolved correctly. But some have mixed case: <UICardDescription/> and <UiDialog>)

I also tried Symlinking UI to Ui, and now see

WARN Overriding NuxtPicture component. You can specify a priority option when calling addComponent to avoid this warning.

I'm using Nuxt 3.8.2 with Nitro 2.8.1, pnpm.

[BayBreezy]

Hey 👋. Thanks for bringing this to my attention. I am surprised anyone is even using this thing. Thought I was the only one lolol. Something in nuxt changed after 3.8 that caused the folder to mot resolve components with the "UI" prefix properly. I was gonna change them all to "Ui" soon as that seems to work. For the hydration error, it may be a problem with one of the radix components. Are you able to create a stackblitz so we can look at it together ?

[BayBreezy]

Hey @edanweis , I just updated the prefix for the components.

[edanweis]

Hey no problem, thanks for the update. Here is a stackblitz

Downgrading nuxt didn't seem to help

[BayBreezy]

Hey @edanweis , I am seeing where you did not add any of the components to the project. In order to use them, you have to run npx ui-thing@latest add and then select the components that you want to add from the list. In your case, I am seeing where you need to add the Button, Popover & the Command components

npx ui-thing@latest add button popover command

Running this will solve the issue for you locally.

I am also seeing where the component resolution is different on stackblitz than it is locally in vscode.

Locally in VSCode, the components show prop hints only when they are prefixed with Ui and not UI. In stackblitz, they only work when prefixed with UI. Like I mentioned earlier, either something changed in nuxt regarding component prefix resolution or i messed up my vscode config

[edanweis]

Hi @BayBreezy, sorry I forgot to add them to the stackblitz, but still the same error.

In my VSCode the prop hints and syntax color change happens when some elements prefixed with Ui and others with UI.

This nuxt@3.7.4 stackblitz.com/edit/nuxt-starter-dcuyda still shows the same errors

[edanweis]

@BayBreezy it look as though shadcn-vue just added Nuxt

[BayBreezy]

Ok. Thank you.

The only solution i see working right now is changing the default name of the component folder from UI to Ui. Doing that on stack blitz solved the issue.

I already changed over all the components to use Ui ( Like the <UICardDescription/> you mentioned) If you come across any that is not following this format, please let me know.

I could also take the approach of using the components hook to set the folder path and add a prefix, but that will just bloat my nuxt.config file.

RE: shadcn-nuxt, they always had a module for nuxt, I just created this for learning purposes and because i want to be able to add my own components(ones not offered by shadcn-vue)

[BayBreezy]

Hey @edanweis , I updated the CLI to use components/Ui as the default folder so the stuff gets resolved properly.