nuxt
Auto Imports don't work as expected with SubFolders
Environment
Nuxt project info: 22:30:41
- Operating System:
Linux - Node Version:
v18.9.0 - Nuxt Version:
3.0.0-rc.11 - Nitro Version:
0.5.4 - Package Manager:
[email protected] - Builder:
vite - User Config:
- - Runtime Modules:
- - Build Modules:
-
Reproduction
https://github.com/f3oall/nuxt-auto-import-subfolders
Run npm run dev and see the errors.
Describe the bug
When auto imports are enabled and when the components folder contains two vue files with the same name, if you try to use one of them inside the other, you will get render errors. Seems like nuxt consider it as an infinite loop.
Error:
[nitro] [dev] [unhandledRejection] RangeError: Maximum call stack size exceeded
at Object.get (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3238:14)
at Object.set (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3151:14)
at Object.defineProperty (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3200:18)
at Function.defineProperty (<anonymous>)
at Object.def (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/shared/dist/shared.cjs.js:568:12)
at Object.markRaw (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/reactivity/dist/reactivity.cjs.js:973:12)
at setupStatefulComponent (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7098:33)
at setupComponent (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7064:11)
at renderComponentVNode (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)
at Module.ssrRenderComponent (/home/f3oall/coding/js/nuxt/nuxt-auto-import-error/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:612:12)
Additional context
No response
Logs
No response
This is Vue core behaviour, rather than Nuxt's, and is deliberate. It assumes that a component can reference itself by means of its own file name.
See https://vuejs.org/api/sfc-script-setup.html#recursive-components
"Note this has lower priority than imported components".
So as far as I understand by default Vue gives priority to imports rather than inferred names. In Nuxt's case, it should give priority to auto-imports since it's an implicit import (still import).