`#components` conflict when auto-importing components from an external package
Hi, I'm trying to write a simple nuxt module to add auto import support for a package's exported components. However, the external package uses the
#components import mapping internally, and it seems to conflict with nuxt's #components.
Here is a demo; it uses pnpm's workspaces to install a local pkg package as a dependency for the nuxt project. The module simply adds a component from pkg with addComponent, and the pkg's package.json uses the #components import mapping.
Running pnpm dev yields
If #components is changed to something else in the pkg/Public.vue and pkg/package.json files, the component is correctly registered by the module.
Is there a way to prevent this conflict without having to update the external package's #components import mapping?StackBlitz
#components conflict - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
2 Replies
Hi @8ctavio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not contain explicit information about resolving conflicts when an external package uses the
#components import mapping, which then clashes with Nuxt's own #components alias during auto-imports via a module.
The documentation does explain how to use addComponent to auto-import components from npm packages and how Nuxt's #components alias works for direct imports and auto-imports, but it does not address alias conflicts with external packages or provide a built-in way to namespace or remap the #components alias for dependencies. The only workaround mentioned in the sources is to change the import mapping in the external package, which you already noted works, but you are seeking a solution that does not require modifying the package itself.
If you need further assistance, you may want to open an issue on the Nuxt GitHub repository or discuss with the Nuxt community for potential workarounds or upcoming features that could address this scenario.
References:
- Direct Imports and #components alias
- addComponent usage for npm packages
- Auto-imported components and configuration
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@538126631076626442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.