fix(nuxt): transform extends layers within node_modules (#5042)

packages/nuxt/src/auto-imports/module.ts

@@ -16,6 +16,7 @@ export default defineNuxtModule<Partial<AutoImportsOptions>>({
     imports: [],
     dirs: [],
     transform: {
+      include: [],
       exclude: undefined
     }
   },

packages/nuxt/src/auto-imports/transform.ts

@@ -15,16 +15,16 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: {ctx
       const exclude = options.transform?.exclude || [/[\\/]node_modules[\\/]/]
       const include = options.transform?.include || []
 
-      // Exclude node_modules by default
-      if (exclude.some(pattern => id.match(pattern))) {
-        return false
-      }
-
       // Custom includes
       if (include.some(pattern => id.match(pattern))) {
         return true
       }
 
+      // Exclude node_modules by default
+      if (exclude.some(pattern => id.match(pattern))) {
+        return false
+      }
+
       // vue files
       if (
         pathname.endsWith('.vue') &&

packages/nuxt/src/core/nuxt.ts

@@ -4,6 +4,7 @@ import type { Nuxt, NuxtOptions, NuxtConfig, ModuleContainer, NuxtHooks } from '
 import { loadNuxtConfig, LoadNuxtOptions, nuxtCtx, installModule, addComponent, addVitePlugin, addWebpackPlugin, tryResolveModule } from '@nuxt/kit'
 // Temporary until finding better placement
 /* eslint-disable import/no-restricted-paths */
+import escapeRE from 'escape-string-regexp'
 import pagesModule from '../pages/module'
 import metaModule from '../head/module'
 import componentsModule from '../components/module'
@@ -66,6 +67,11 @@ async function initNuxt (nuxt: Nuxt) {
   addVitePlugin(UnctxTransformPlugin(nuxt).vite({ sourcemap: nuxt.options.sourcemap }))
   addWebpackPlugin(UnctxTransformPlugin(nuxt).webpack({ sourcemap: nuxt.options.sourcemap }))
 
+  // Transpile layers within node_modules
+  nuxt.options.build.transpile.push(
+    ...nuxt.options._layers.filter(i => i.cwd && i.cwd.includes('node_modules')).map(i => i.cwd)
+  )
+
   // Init user modules
   await nuxt.callHook('modules:before', { nuxt } as ModuleContainer)
   const modulesToInstall = [
@@ -133,7 +139,14 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
   // Temporary until finding better placement for each
   options.appDir = options.alias['#app'] = resolve(distDir, 'app')
   options._majorVersion = 3
-  options._modules.push(pagesModule, metaModule, componentsModule, autoImportsModule)
+  options._modules.push(pagesModule, metaModule, componentsModule)
+  options._modules.push([autoImportsModule, {
+    transform: {
+      include: options._layers
+        .filter(i => i.cwd)
+        .map(i => new RegExp(`(^|\\/)${escapeRE(i.cwd.split('node_modules/').pop())}(\\/|$)(?!node_modules\\/)`))
+    }
+  }])
   options.modulesDir.push(resolve(pkgDir, 'node_modules'))
   options.build.transpile.push('@nuxt/ui-templates')
   options.alias['vue-demi'] = resolve(options.appDir, 'compat/vue-demi')

test/fixtures/basic/.gitignore

@@ -0,0 +1 @@
+!extends/node_modules

test/fixtures/basic/extends/foo/server/middleware/foo.ts

@@ -1,6 +0,0 @@
-import type { ServerResponse } from 'node:http'
-
-export default (_, res: ServerResponse, next) => {
-  res.setHeader('injected-header', 'foo')
-  next()
-}

test/fixtures/basic/extends/node_modules/foo/server/middleware/foo.ts

@@ -0,0 +1,4 @@
+// TODO: add back TypeScript and auto-importing once Nitro supports it
+export default (event) => {
+  event.res.setHeader('injected-header', 'foo')
+}

test/fixtures/basic/nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   builder: process.env.TEST_WITH_WEBPACK ? 'webpack' : 'vite',
   extends: [
     './extends/bar',
-    './extends/foo'
+    './extends/node_modules/foo'
   ],
   nitro: {
     output: { dir: process.env.NITRO_OUTPUT_DIR }