[vite-node] Failed to load...

[michaelpumo]

Environment

• Operating System: Darwin
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

Minimal Reproduction that "extends" ui folder. https://stackblitz.com/edit/nuxt-framework-ikip96?file=pages/index.vue

Describe the bug

I am trying to use the extends feature within the Nuxt config but for some reason, it fails to load the components from within that folder: https://v3.nuxtjs.org/examples/advanced/config-extends

I am intentionally not using auto-imported components and am instead explicitly importing them.

<script setup>
import FancyButton from '@/components/FancyButton.vue'; // This is in the main app.
import MyList from '@/components/MyList.vue'; // This is in the 'extended' folder (./ui/components/MyList.vue)
</script>

<template>
  <div>
    <FancyButton>Fancy Button</FancyButton>
    <MyList>List</MyList>
  </div>
</template>

I was of the understanding that by extending a folder, components and other assets would be available as if in the same location as the consuming app. I think this is a bug but I could be wrong?

Could it be something to do with import aliases like @? On the reproduction I'm getting:

500
[vite-node] Failed to load /components/MyList.vue
at directRequest (./node_modules/vite-node/dist/client.mjs:198:13)
at  ()

Additional context

I had someone look at the minimal reproduction and they got it working by removing explicit imports and only using the auto-imports. However, we cannot do this within our app because our unit tests do not know what the components are otherwise, so this is why we always import them manually. But in any case, this should still work, right?

Logs

No response