Error when extending layer from GitHub with install: true

[MuhammadM1998]

Environment

Shared for Layer and Main App

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.11.1
• CLI Version: 3.10.1
• Nitro Version: 2.9.4
• Package Manager: pnpm@8.15.5
• Builder: -
• Build Modules: -

Layer

• User Config: modules, devtools
• Runtime Modules: @nuxt/ui@2.14.2

Main App

• User Config: extends, devtools
• Runtime Modules: -

Reproduction

Layer: https://github.com/MuhammadM1998/nuxt-layers-repro
Main App: https://github.com/MuhammadM1998/nuxt-layers-repro-main-app

Describe the bug

Reproduction

• Clone the main app (Fails to fetch the layer in stackblitz don't know why)
• Run pnpm i

Expected Behavior

• It install the main app & the layer dependencies correctly.

Actual Behavior

• It install the main app dependencies but throws the following error when installing the layer dependencies

ERROR  Error while requiring module @nuxt/ui: Error: Cannot find module 'C:/nuxt-layers-repro-main-app/@nuxt/ui'
Require stack:
- C:\nuxt-layers-repro-main-app\index.js

 ERROR  Cannot find module 'C:/nuxt-layers-repro-main-app/@nuxt/ui'
Require stack:
- C:\nuxt-layers-repro-main-app\index.js

  Require stack:
  - index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
  at Function.resolve (node:internal/modules/helpers:187:19)
  at Function._resolve [as resolve] (node_modules\.pnpm\jiti@1.21.0\node_modules\jiti\dist\jiti.js:1:251148)
  at resolveModule (/C:/nuxt-layers-repro-main-app/node_modules/.pnpm/@nuxt+kit@3.11.1/node_modules/@nuxt/kit/dist/index.mjs:2210:29)
  at requireModule (/C:/nuxt-layers-repro-main-app/node_modules/.pnpm/@nuxt+kit@3.11.1/node_modules/@nuxt/kit/dist/index.mjs:2215:24)
  at loadNuxtModuleInstance (/C:/nuxt-layers-repro-main-app/node_modules/.pnpm/@nuxt+kit@3.11.1/node_modules/@nuxt/kit/dist/index.mjs:2451:92)
  at async installModule (/C:/nuxt-layers-repro-main-app/node_modules/.pnpm/@nuxt+kit@3.11.1/node_modules/@nuxt/kit/dist/index.mjs:2407:47)
  at async initNuxt (/C:nuxt-layers-repro-main-app/node_modules/.pnpm/nuxt@3.11.1_@unocss+reset@0.58.6_floating-vue@5.2.2_unocss@0.58.6_vite@5.2.6/node_modules/nuxt/dist/index.mjs:4171:7)
  at async loadNuxt (/C:/nuxt-layers-repro-main-app/node_modules/.pnpm/nuxt@3.11.1_@unocss+reset@0.58.6_floating-vue@5.2.2_unocss@0.58.6_vite@5.2.6/node_modules/nuxt/dist/index.mjs:4269:5)
  at async loadNuxt (/C:/nuxt-layers-repro-main-app/node_modules/.pnpm/@nuxt+kit@3.11.1/node_modules/@nuxt/kit/dist/index.mjs:2570:19)

Additional context

No response

Logs

No response

[iamsurelydaveydave]

Same issue, in my case I created a server utils layer for mongodb. The only solution that works for me is to install mongodb on the nuxt app for the layer to work.

Mongodb is installed but nuxt can't seems to read it from where it is located.

This is after I installed mongodb to the nuxt app.

[MuhammadM1998]

Related #27038 (comment). OP says the install is working as expected, He's using GitLab as a provider

[aurelioth]

Same issue, but I am seeing that also, even if you install the dependencies on the main app, the layer configuration is not extended.

I am using apollo client as a layer, to use it as a gateway, plus authentication through it.

Somebody on the community suggested to use modules instead as a workaround.

[NtchPlayer]

Same issue here whit nuxt Pinia. Even with the install option ['github:my-github/my-ui-kit', { auth: process.env.GITHUB_TOKEN, install: true }], the main application say that the module is not install.

[aurelioth]

I made this work, at least on my local environment.
So, based on the fix, I think is related to this issue. here

In my extended application nuxt.config.ts I disabled the ssr

export default defineNuxtConfig({ ssr: false, extends: [ ['gh:remote/repo', { install: true}] ] })

And in the /node_modules/@nuxt/kit/dist/index.mjs file, I added this line to the loadNuxtModuleInstance function

async function loadNuxtModuleInstance(nuxtModule, nuxt = useNuxt()) { nuxt.options.modulesDir.push(...nuxt.options._layers.map((l) => resolve(l.config.srcDir || l.cwd, l.config?.dir?.modules || "modules"))); ... }

To resolve the layers on the moduleDirs, to be installed.

Probably there is a better way to solve the issue without modifying the nuxt core files, but I'm a noobie with Node frameworks.

Hope this helps on the issue solving

[pi0]

/cc @danielroe i haven't check nuxt impl yet but are are already pushing layers ({path}/node_modules) to modules_dir? (if not that probably would make sense and fix issues)

[aurelioth]

Thanks @pi0 and @danielroe for the quick solution on this issue.

[snakysnake]

I have a rather big codebase and I want to migrate to adopting nuxt layers, made two components work, figured I may just copy all of them to the "base" layer.
Just wanted to give the feedback, that I feel like the error messages that nuxt is able to provide here are very limited to say the least.
It's hardly giving any direction on where an error is coming from...
For example: I have an Input component that relies on "md5", when using it on another layer, I just see a completely messed up, broken component, and in the console I don't get any warning whatsoever.
Then I checked the component manually, install md5 and afterwards it's working fine.
Long story short, I feel like the layer technology really needs better error messaging, in my opinion.
Thanks