N
Nuxt•2w ago
kogratte

Issue with component resolution

Hey there! I do have a quiet massive app that has reference to a shared package with an online platform. This package is kindof common stuff for design-system, utilities and so on. Within this shared package, I do have a deep component (components/A/B/C/D.vue), and its siblings (components/A/B/C/D/ChildA.vue...) When running dev server from within common environment, everything is working fine. If I install this package on something else (being local software OR website), the app seems freezing. No error, but not more redirection to the page that refers D.vue. When I override locally components/A/B/C/D.vue and proxy the common component, everything seems fine and working. I do not have a clue about what I should be looking for, nor about the root cause of this silent fail. Does it ring a bell? Some tips to share to debug? I can definitely proxify the shared component, but it would be way much better to fix the underlying root cause.
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @kogratte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're experiencing a silent failure when using a deeply nested component from a shared package in your Nuxt app, which only occurs when the package is installed externally (not in a monorepo or linked environment). While the knowledge sources do not provide an exact match for your scenario, there are some relevant tips and known issues in Nuxt that may help you debug: 1. Module/Component Resolution Issues
Nuxt uses its own module resolution logic, and there have been recent changes to improve and speed up this process (e.g., migration to the exsolve resolver and fixes to avoid CJS fallback) which could affect how deep imports are resolved, especially from external packages. If your shared package is not being resolved correctly, it could cause components to silently fail to load, especially if there are no explicit errors thrown. Make sure your Nuxt version is up to date, as recent improvements may help with these issues perf(nuxt): migrate to use exsolve for module resolution, fix(kit): use mlly to resolve module paths to avoid cjs fallback. 2. Component Auto-Import and Directory Structure
Nuxt auto-imports components based on directory structure. If your shared package's components are not being picked up, check that the package is properly exposed and that the consuming Nuxt app's configuration allows for auto-importing from node_modules or external sources. Sometimes, deep or non-standard directory structures can cause issues. 3. Template Import Resolution
There is an experimental Nuxt config option, templateImportResolution, which controls how imports in templates are resolved. If you are experiencing resolution conflicts or silent failures, you might try toggling this option to see if it affects the behavior: 
   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       templateImportResolution: false
     }
   })
   
   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       templateImportResolution: false
     }
   })
This can help if Nuxt is not resolving imports as expected from your shared package Docs: templateImportResolution. 4. Debugging Tips
- Try importing the problematic component directly in a page or layout to see if you get any error messages. - Check the build output and browser console for any warnings or errors related to module resolution. - If possible, simplify the import path or flatten the directory structure to see if the issue is related to deep nesting. - Ensure that your shared package is properly built and that all files are included in the published package. 5. Proxying as a Workaround
As you've noticed, proxying or overriding the component locally works, which suggests the issue is with how Nuxt resolves or bundles the component from the external package. While the knowledge sources do not provide a definitive root cause for your specific silent failure, the above points are the most relevant based on known Nuxt module and component resolution behaviors. If the problem persists, consider creating a minimal reproduction and checking for related open issues in the Nuxt repository. If you have more details (such as Nuxt version, package structure, or config), I can help you further narrow down the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@639111892144619539> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?