fix(nuxt): ensure component dirs in `node_modules` have lower scanning priority #6382

CodeDredd · 2022-08-05T14:29:54Z

🔗 Linked issue

Related #6070

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Somehow the behaviour for overwriting components which are defined by packages changed. For example if you have a Logo component which is stored under components/global will lose against the package like docus there also a component components/content/Logo is.

~~It gets even stranger. A component in components/global will be prefixed with Global which is not right. So at the end you get GlobalLogo registered~~

So for now it's not possible to overwrite a global component locally because of how the directories are listed. In my case the Logo from the node_modules package was always first and therefor no other defined component could overwrite it.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

Reproduction

Priority issue: https://codesandbox.io/s/eager-noyce-r9tjgs

netlify · 2022-08-05T14:29:58Z

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	`d5f31ac`
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62f2237b72f3a10009094b1a

CodeDredd · 2022-08-05T14:32:03Z

@pi0 Now my chance is here for my first contribution 😄

danielroe · 2022-08-05T14:35:41Z

Would you attach a reproduction showing that ~/components/global/SomeComponent.vue is prefixed with GlobalSomeComponent? 🙏

The linked PR (#6070) is still only available on the edge channel, and will not work in RC6.

CodeDredd · 2022-08-05T14:47:01Z

@danielroe Sure....already working on it as mentioned. Yeah i know its edge. It's only releated to edge version

CodeDredd · 2022-08-05T15:13:44Z

@danielroe Ok the thing with GlobalLogo i am not able to reproduce after running yarn upgrade.... i am trying to find out how i got it. Meanwhile the thing with the priority for components is still there.
Somehow i couldn't get a stackblitz example running. It throws me an arrow in @nuxthq

But here is a working reproduction what i mean:
https://github.com/CodeDredd/pinia-orm/tree/docs-search/docs
I have added a Logo in global and content and still the default Logo from docus is taken.

danielroe · 2022-08-05T15:26:02Z

Yes, it might be that you are on a version of edge before the PR, which is why a repro would be helpful.

I like the point about priority. But it might be more than just sorting them. See for example this logic in addComponent:

framework/packages/kit/src/components.ts

Lines 54 to 63 in a41644e

    
           nuxt.hook('components:extend', (components: Component[]) => { 
        
             const existingComponent = components.find(c => (c.pascalName === component.pascalName || c.kebabName === component.kebabName) && c.mode === component.mode) 
        
             if (existingComponent) { 
        
               const name = existingComponent.pascalName || existingComponent.kebabName 
        
               console.warn(`Overriding ${name} component.`) 
        
               Object.assign(existingComponent, component) 
        
             } else { 
        
               components.push(component) 
        
             } 
        
           })

.

CodeDredd · 2022-08-05T15:36:12Z

The global prefix issue:
Ok get your point....i can defintly tell you that you feature wasalready in the edge version....i am working on a reproduction.

The priority issue:
Ok i get what you mean....but somehow it doesnt come to that point if you run my repdroduction. Its never overwriting or coming to that hook because of this i think:

framework/packages/nuxt/src/components/scan.ts

Lines 125 to 128 in 07fa104

    
           // Ignore component if component is already defined (with same mode) 
        
           if (!components.some(c => c.pascalName === component.pascalName && ['all', component.mode].includes(c.mode))) { 
        
             components.push(component) 
        
           }

CodeDredd · 2022-08-05T16:29:04Z

Here is the priority issue thing. Please run yarn dev. somehow sandbox always uses ``yarn start`:
https://codesandbox.io/s/eager-noyce-r9tjgs

CodeDredd · 2022-08-05T16:44:56Z

I give up on the prefix thing....seems to be working now. Renaming the ticket so its accurate

pi0 · 2022-08-05T16:46:41Z

Thanks for providing reproduction @CodeDredd 🙏🏼

Locally trying and debugging, this is normalized output of componentDirs:

- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/content [global]                                                               
- /Users/pooya/tmp/r9tjgs/components/content [global]
- /Users/pooya/tmp/r9tjgs/components/global [global]
- /Users/pooya/tmp/r9tjgs/components
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/app [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/docs [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/prose [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/content [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/github [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/icons [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxtjs/algolia/dist/runtime/components [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt/content/dist/runtime/components [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxthq/studio/dist/runtime/components

Obviously, docus dir should be after yours to allow overriding. Let me debug what exactly is happening.

pi0 · 2022-08-05T17:14:47Z

Debugging more, it seems a regression from the content module (See #1417) which we should solve there. (@CodeDredd please ping in linked comment if you like to work on fixing it. I think you can simply reverse layers() so that last unshift goes to first)

I think it would be a general good fix to ensure dirs with node_modules in them, always have lower priority during sorting process. What do you think @danielroe?

danielroe · 2022-08-05T17:17:29Z

Nice find. I agree, user provided components should always override modules/extends.

pi0 · 2022-08-05T17:33:59Z

js sorting is fun 😆

CodeDredd · 2022-08-05T17:47:06Z

I dont't want make a double sort to ensure that global ist first content second and node_modules last . Damn js sort ^^

make sure that node_modules is always last and global dirs always first

CodeDredd · 2022-08-05T18:22:11Z

@pi0 now you test it again....it should be now save that node_modules is always last and users global always first

fix(nuxt): components/global is not working correctly

e8f9778

This comment was marked as off-topic.

Sign in to view

CodeDredd changed the title ~~fix(nuxt): components/global is not working correctly~~ fix(nuxt): local global components should have prority over package components Aug 5, 2022

pi0 added the bug Something isn't working label Aug 5, 2022

pi0 mentioned this pull request Aug 5, 2022

Cannot override components/content when using multi layer nuxt/content#1417

Closed

pi0 changed the title ~~fix(nuxt): local global components should have prority over package components~~ fix(nuxt): ensure component dirs in `node_modules have lower scanning priority Aug 5, 2022

pi0 changed the title ~~fix(nuxt): ensure component dirs in `node_modules have lower scanning priority~~ fix(nuxt): ensure component dirs in node_modules have lower scanning priority Aug 5, 2022

refactor(nuxt): change to double sort in dirs sorting

593b174

make sure that node_modules is always last and global dirs always first

CodeDredd mentioned this pull request Aug 5, 2022

fix: make sure components/content is on top in layers nuxt/content#1418

Merged

7 tasks

pi0 and others added 2 commits August 8, 2022 22:13

Merge branch 'main' into main

d0093ad

refactor: sort by group

d5f31ac

pi0 approved these changes Aug 9, 2022

View reviewed changes

pi0 merged commit 0b22079 into nuxt:main Aug 9, 2022

pi0 mentioned this pull request Aug 9, 2022

v3.0.0-rc.7 #6375

Merged

danielroe added the 3.x label Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(nuxt): ensure component dirs in `node_modules` have lower scanning priority #6382

fix(nuxt): ensure component dirs in `node_modules` have lower scanning priority #6382

CodeDredd commented Aug 5, 2022 •

edited

Loading

netlify bot commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022 •

edited

Loading

danielroe commented Aug 5, 2022

CodeDredd commented Aug 5, 2022

CodeDredd commented Aug 5, 2022 •

edited

Loading

This comment was marked as off-topic.

danielroe commented Aug 5, 2022

CodeDredd commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022

pi0 commented Aug 5, 2022

pi0 commented Aug 5, 2022 •

edited

Loading

danielroe commented Aug 5, 2022

pi0 commented Aug 5, 2022

CodeDredd commented Aug 5, 2022

CodeDredd commented Aug 5, 2022

fix(nuxt): ensure component dirs in node_modules have lower scanning priority #6382

fix(nuxt): ensure component dirs in node_modules have lower scanning priority #6382

Conversation

CodeDredd commented Aug 5, 2022 • edited Loading

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Reproduction

netlify bot commented Aug 5, 2022 • edited Loading

✅ Deploy Preview for nuxt3-docs canceled.

CodeDredd commented Aug 5, 2022 • edited Loading

danielroe commented Aug 5, 2022

CodeDredd commented Aug 5, 2022

CodeDredd commented Aug 5, 2022 • edited Loading

This comment was marked as off-topic.

danielroe commented Aug 5, 2022

CodeDredd commented Aug 5, 2022 • edited Loading

CodeDredd commented Aug 5, 2022 • edited Loading

CodeDredd commented Aug 5, 2022

pi0 commented Aug 5, 2022

pi0 commented Aug 5, 2022 • edited Loading

danielroe commented Aug 5, 2022

pi0 commented Aug 5, 2022

CodeDredd commented Aug 5, 2022

CodeDredd commented Aug 5, 2022

fix(nuxt): ensure component dirs in `node_modules` have lower scanning priority #6382

fix(nuxt): ensure component dirs in `node_modules` have lower scanning priority #6382

CodeDredd commented Aug 5, 2022 •

edited

Loading

netlify bot commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022 •

edited

Loading

CodeDredd commented Aug 5, 2022 •

edited

Loading

pi0 commented Aug 5, 2022 •

edited

Loading