installing deps from a layer contains a pnpm version mismatch

[sandros94]

Environment

• pnpm: 9.0.5
• node: v20.11.1

Reproduction

Stackblitz isn't letting me extend from a github repo, but this is the layer I'm extending from, with this nuxt.config.ts in the destination being:

export default defineNuxtConfig({
  devtools: { enabled: true },
  extends: [
    ['gh:sandros94/ui#f77b037', { install: true }],
  ],
})

Describe the bug

The source pnpm-lock.yaml is version 9.0, but the c12 provided one is lockfileVersion: '6.0'.

Additional context

Testing out Nuxt compatibility 4 with [email protected] I do get the error in the console, but it seems to be installing the packages correctly.

Logs

Ignoring broken lockfile at A:\github\sandros94\s94.dev\node_modules\.c12\gh_sandros94_ui_qnPJOddopC: Lockfile A:\github\sandros94\s94.dev\node_modules\.c12\gh_sandros94_ui_qnPJOddopC\pnpm-lock.yaml not compatible with current pnpm 

[pi0]

Hi. This is somehow similar to #128 where pnpm picks workspace constraints.

I think a simple workaround (and better layer structure) if you cannot get rid of different lockfiles, is that in your layer, use a sub-directory (gh:sandros94/ui/theme) and inside sub-dir without lockfile. This pattern has more benefits that development files of layer won't be pulled into the production layer

[sandros94]

Thanks, idk why I didn't think of it. Will test it as soon as I get back. (This indeed simplifies the development of it, I guess I'm too used to modules 🙄)

If I'm not mistaken this shouldn't have any problem when referencing a specific commit like gh:sandros94/ui/theme#f77b037, right?

[sandros94]

Ok, first off thanks for the tip of moving it into a sub-dir (it was useless to pull dev files into production), but I'm not fully getting the expected result:

The setup to debug this is a c12-issue156 branch of my personal website repo, that extends my current ui/main layer.

1. After pnpm i I do see deps getting installed in the logs (first deps are from the layer, the others from the local project):
   
2. checking the newly created pnpm-lock.yaml in the c12 layer I do see that lockfileVersion is still 6.0, although this time I didn't get any errors from the first step (opposed to my original issue description)
3. starting the dev server I do see correctly the content from the layer, but not from the modules within the layer (in fact looking at the folders inside node_modules I don't see them installed, nor in the local pnpm-lock.yaml), they are just not installed and no error is thrown.

Just as an experiment I did test with bun but the same result is obtained

EDIT

I just noticed that [email protected] got released (and installed) it has nothing to do with it

[sandros94]

Interestingly though, the nuxt devtools do show all the modules from the layer, even if they are not working:

[pi0]

I suspect some of the things you are mentioning are not directly c12 issues (or this issue at least) anymore..

Do you think you can help on making a c12-only reproduction for pnpm issues and we can track others via nuxt repo maybe? (if it is hard no worries)

[sandros94]

I suspect some of the things you are mentioning are not directly c12 issues (or this issue at least) anymore..

Indeed the type issue wasn't related, sorry for the spam.

Do you think you can help on making a c12-only reproduction for pnpm issues and we can track others via nuxt repo maybe? (if it is hard no worries)

Indeed I'm not sure where to start in creating a c12-only (or any unjs-only for what matters) repro, since I started learning js/ts and package managers only with Nuxt. BUT I'm willing to learn on creating such repro and help debug this.
Although I'm starting to think that this is not related only to pnpm, since bun also produce the same outcome. That what to me it seems (with the layer being in a sub-dir now):

• layer's deps get correctly installed in lockfile inside the sub c12 folder (but not top-level node_modules)
• the ts logics from those deps is loaded (for example tailwind styles and fonts are loaded once dev is started)
• components from those deps aren't loaded (for example any component from nuxt/ui isn't working)
• components form the layer itself are loaded (since I do see tailwinds classes getting applied to those components)

[sandros94]

Ok I can double confirm my latest message by using the component inspector of the nuxt's devtools:

• components from the layer are correctly relosved from: node_modules/.c12/gh_sandros94_ui_X6UG5TII8B/components/...
• while @nuxt/ui ones (for example) are from: node_modules/.c12/gh_sandros94_ui_X6UG5TII8B/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@nuxt/ui/...

Hope to not say something stupid, but should the second one be like: node_modules/.c12/gh_sandros94_ui_X6UG5TII8B/node_modules/@nuxt/ui/... instead of the .pnpm sub-folder?

[pi0]

pnpm uses node_modules/.pnpm (on it's root which is node_modules/.c12/gh_sandros94_ui_X6UG5TII8B) this looks the right behavior of it.

[sandros94]

pnpm uses node_modules/.pnpm (on it's root which is node_modules/.c12/gh_sandros94_ui_X6UG5TII8B) this looks the right behavior of it.

yes it seems so, just checked with bun and it does look for node_modules/.c12/gh_sandros94_ui_X6UG5TII8B/node_modules/@nuxt/ui/... without loading components

[sandros94]

Ok I revert back some of my understandings of this issue:

• Both ts and vue logics are correctly loaded from both the layer and its deps (UButton links do work for example).
• with the following screenshot, while the components are correctly loaded from the layer's deps, the tailwind styles aren't applied (UAvatar as an example), although the classes are there.
  

This suggests that the module's deps aren't loaded in the correct order?
If I'm not mistaken it should be:
@nuxtjs/tailwindcss-->@nuxt/ui-->My Layer-->Current Project
While in this screenshot it seems more like:
@nuxt/ui-->@nuxtjs/tailwindcss-->My Layer-->Current Project

(testing with both pnpm and bun, so I would say that package managers have nothing to do)

---

@pi0 please tell me if I'm spamming too much, but the more I go on with debugging (and backlogging it here) the more I'm starting to think:

1. The original post of this issue was related to Install dependencies after cloning not working with pnpm-workspace #128, since it did pick up the pnpm-lock of the layer itself and thus create the known nypm issue.
2. Now I did move to a sub-dir layer structure without a lock (since it gives me a number of advantages).
3. In this new structure, with the racing condition described above, I'm starting to think this is more a nuxt issue rather then a c12 issue...

Should I close this one and reopen it in the nuxt repo? I'll wait for orders 🫡

[sandros94]

This suggests that the module's deps aren't loaded in the correct order?
If I'm not mistaken it should be:
@nuxtjs/tailwindcss-->@nuxt/ui-->My Layer-->Current Project
While in this screenshot it seems more like:
@nuxt/ui-->@nuxtjs/tailwindcss-->My Layer-->Current Project

@ineshbose and @BobbieGoede, sorry for the ping, could this be somewhat related to the discussion you guys were having on discord the other day?

[BobbieGoede]

@sandros94
Where is @nuxtjs/tailwindcss being added? The repo you linked earlier https://github.com/Sandros94/s94.dev/tree/c12-issue156 seems to be private.

[ineshbose]

@BobbieGoede the layer seems to be https://github.com/Sandros94/ui, and @nuxtjs/tailwindcss would be added by @nuxt/ui, so it's reasonable for @nuxt/ui to be installed first.

Lets discuss this on Discord right now if you're all on?

[pi0]

Thanks for all the details and followups ❤️

I think we can safely track the c12 relevant part from #128

If i could help on any of Nuxt relevant issues (or discord!) please ping me 🙏🏼