fix(nuxt): ignore #components import mapping inside packages that use it internally (#33049)

Author: 8ctavio

packages/nuxt/src/components/plugins/transform.ts

@@ -1,10 +1,12 @@
+import { isObject } from '@vue/shared'
 import { isIgnored } from '@nuxt/kit'
 import type { Import } from 'unimport'
 import { createUnimport } from 'unimport'
 import { createUnplugin } from 'unplugin'
 import { parseURL } from 'ufo'
 import { parseQuery } from 'vue-router'
-import { normalize } from 'pathe'
+import { isAbsolute, normalize } from 'pathe'
+import { readPackage } from 'pkg-types'
 import { genImport } from 'knitwork'
 import type { getComponentsT } from '../module'
 import type { Nuxt } from 'nuxt/schema'
@@ -112,6 +114,12 @@ export function TransformPlugin (nuxt: Nuxt, options: TransformPluginOptions) {
 
       if (!code.includes('#components')) { return }
 
+      // If package defines a "#components" import mapping, assume is used internally by the package.
+      const pkg = isAbsolute(id) && id.includes('node_modules') ? await readPackage(id, { try: true }) : undefined
+      if (isObject(pkg) && isObject(pkg.imports) && Object.hasOwn(pkg.imports, '#components')) {
+        return
+      }
+
       componentUnimport.modifyDynamicImports((imports) => {
         imports.length = 0
         imports.push(...getComponentsImports())

packages/nuxt/test/components-transform.test.ts

@@ -1,11 +1,15 @@
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import type { Component, Nuxt } from '@nuxt/schema'
 import { kebabCase } from 'scule'
-import { normalize } from 'pathe'
+import { join, normalize } from 'pathe'
 import { findWorkspaceDir } from 'pkg-types'
 
 import { TransformPlugin } from '../src/components/plugins/transform'
 
+const pkgPath = fileURLToPath(new URL('./node_modules/package-fixture', import.meta.url))
+const virtualFilePath = join(pkgPath, 'foo', 'bar', 'baz')
+
 describe('components:transform', () => {
   it('should transform #components imports', async () => {
     const transform = createTransformer([
@@ -22,6 +26,16 @@ describe('components:transform', () => {
     `)
   })
 
+  it('should ignore #components import mapping inside packages that use it internally', async () => {
+    const transform = createTransformer([
+      createComponent('Foo'),
+      createComponent('Bar', { export: 'Bar' }),
+    ])
+
+    const code = await transform('import { Internal, Private } from \'#components\'', virtualFilePath)
+    expect(code).toMatchInlineSnapshot(`undefined`)
+  })
+
   it('should correctly resolve server-only components', async () => {
     const transform = createTransformer([
       createComponent('Foo', { mode: 'server' }),

packages/nuxt/test/node_modules/package-fixture/package.json

@@ -3,6 +3,7 @@ packages:
   - packages/**
   - '!packages/nuxi'
   - '!packages/test-utils'
+  - '!packages/nuxt/test/package-fixture'
   - playground
   - test/fixtures/*