fix(nuxt): use default export for raw components (#25282)

packages/nuxt/src/components/loader.ts

@@ -76,7 +76,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
             identifier += '_lazy'
             imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: false })}.then(c => c.${component.export ?? 'default'} || c)${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
           } else {
-            imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
+            imports.add(genImport(component.filePath, [{ name: component._raw ? 'default' : component.export, as: identifier }]))
 
             if (isClientOnly) {
               imports.add(`const ${identifier}_wrapped = createClientOnly(${identifier})`)

test/basic.test.ts

@@ -2307,6 +2307,38 @@ function normaliseIslandResult (result: NuxtIslandResponse) {
   }
 }
 
+describe('import components', () => {
+  let html = ''
+
+  it.sequential('fetch import-components page', async () => {
+    html = await $fetch('/import-components')
+  })
+
+  it('load default component with mode all', () => {
+    expect(html).toContain('default-comp-all')
+  })
+
+  it('load default component with mode client', () => {
+    expect(html).toContain('default-comp-client')
+  })
+
+  it('load default component with mode server', () => {
+    expect(html).toContain('default-comp-server')
+  })
+
+  it('load named component with mode all', () => {
+    expect(html).toContain('named-comp-all')
+  })
+
+  it('load named component with mode client', () => {
+    expect(html).toContain('named-comp-client')
+  })
+
+  it('load named component with mode server', () => {
+    expect(html).toContain('named-comp-server')
+  })
+})
+
 describe('lazy import components', () => {
   let html = ''
 

test/fixtures/basic/modules/import-components/index.ts

@@ -0,0 +1,49 @@
+import { addComponent, createResolver, defineNuxtModule } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'import-components'
+  },
+  setup () {
+    const { resolve } = createResolver(import.meta.url)
+
+    addComponent({
+      name: 'DCompClient',
+      filePath: resolve('./runtime/components'),
+      mode: 'client',
+    })
+
+    addComponent({
+      name: 'DCompServer',
+      filePath: resolve('./runtime/components'),
+      mode: 'server',
+    })
+
+    addComponent({
+      name: 'DCompAll',
+      filePath: resolve('./runtime/components'),
+      mode: 'all',
+    })
+
+    addComponent({
+      name: 'NCompClient',
+      export: 'NComp',
+      filePath: resolve('./runtime/components'),
+      mode: 'client',
+    })
+
+    addComponent({
+      name: 'NCompServer',
+      export: 'NComp',
+      filePath: resolve('./runtime/components'),
+      mode: 'server',
+    })
+
+    addComponent({
+      name: 'NCompAll',
+      export: 'NComp',
+      filePath: resolve('./runtime/components'),
+      mode: 'all',
+    })
+  },
+})

test/fixtures/basic/modules/import-components/runtime/components.ts

@@ -0,0 +1,13 @@
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'DComp',
+  props: { message: String },
+  render: (props: any) => h('h1', props.message),
+})
+
+export const NComp = defineComponent({
+  name: 'NComp',
+  props: { message: String },
+  render: (props: any) => h('h1', props.message),
+})

test/fixtures/basic/pages/import-components/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <DCompAll message="default-comp-all" />
+    <DCompClient message="default-comp-client" />
+    <DCompServer message="default-comp-server" />
+    <NCompAll message="named-comp-all" />
+    <NCompClient message="named-comp-client" />
+    <NCompServer message="named-comp-server" />
+  </div>
+</template>