From 10af3694364248e1645ed316ddbf34cc37c95964 Mon Sep 17 00:00:00 2001
From: Becem <becem.gharbi@live.com>
Date: Fri, 19 Jan 2024 22:43:19 +0100
Subject: [PATCH] fix(nuxt): use named import for lazy components (#25286)

---
 packages/nuxt/src/components/loader.ts        |  2 +-
 test/basic.test.ts                            | 20 ++++++++++++
 .../modules/lazy-import-components/index.ts   | 31 +++++++++++++++++++
 .../runtime/components.ts                     |  7 +++++
 .../pages/lazy-import-components/index.vue    |  7 +++++
 5 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/basic/modules/lazy-import-components/index.ts
 create mode 100644 test/fixtures/basic/modules/lazy-import-components/runtime/components.ts
 create mode 100644 test/fixtures/basic/pages/lazy-import-components/index.vue

diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index 2c86a709cb..9bda024d72 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -74,7 +74,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
           if (lazy) {
             imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
             identifier += '_lazy'
-            imports.add(`const ${identifier} = __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })}${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
+            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 }]))
 
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 5294cbf7c0..25ee24d137 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -2306,3 +2306,23 @@ function normaliseIslandResult (result: NuxtIslandResponse) {
     }
   }
 }
+
+describe('lazy import components', () => {
+  let html = ''
+
+  it.sequential('fetch lazy-import-components page', async () => {
+    html = await $fetch('/lazy-import-components')
+  })
+
+  it('lazy load named component with mode all', () => {
+    expect(html).toContain('lazy-named-comp-all')
+  })
+
+  it('lazy load named component with mode client', () => {
+    expect(html).toContain('lazy-named-comp-client')
+  })
+
+  it('lazy load named component with mode server', () => {
+    expect(html).toContain('lazy-named-comp-server')
+  })
+})
diff --git a/test/fixtures/basic/modules/lazy-import-components/index.ts b/test/fixtures/basic/modules/lazy-import-components/index.ts
new file mode 100644
index 0000000000..df24bac101
--- /dev/null
+++ b/test/fixtures/basic/modules/lazy-import-components/index.ts
@@ -0,0 +1,31 @@
+import { addComponent, createResolver, defineNuxtModule } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'lazy-import-components'
+  },
+  setup () {
+    const { resolve } = createResolver(import.meta.url)
+
+    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',
+    })
+  },
+})
diff --git a/test/fixtures/basic/modules/lazy-import-components/runtime/components.ts b/test/fixtures/basic/modules/lazy-import-components/runtime/components.ts
new file mode 100644
index 0000000000..e9781e56e5
--- /dev/null
+++ b/test/fixtures/basic/modules/lazy-import-components/runtime/components.ts
@@ -0,0 +1,7 @@
+import { defineComponent, h } from 'vue'
+
+export const NComp = defineComponent({
+  name: 'NComp',
+  props: { message: String },
+  render: (props: any) => h('h1', props.message),
+})
diff --git a/test/fixtures/basic/pages/lazy-import-components/index.vue b/test/fixtures/basic/pages/lazy-import-components/index.vue
new file mode 100644
index 0000000000..0f46fc9dfc
--- /dev/null
+++ b/test/fixtures/basic/pages/lazy-import-components/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <LazyNCompAll message="lazy-named-comp-all" />
+    <LazyNCompClient message="lazy-named-comp-client" />
+    <LazyNCompServer message="lazy-named-comp-server" />
+  </div>
+</template>