From 2c8c21209b930a3b5865f9028b8ba115d958f21d Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Mon, 3 Oct 2022 16:14:07 +0200
Subject: [PATCH] fix(nuxt): fix lazy import of .client components (#7422)

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 packages/nuxt/src/components/loader.ts | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index 517db352ac..452fc7025c 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -71,20 +71,25 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
           let identifier = map.get(component) || `__nuxt_component_${num++}`
           map.set(component, identifier)
 
-          if (lazy) {
-            imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
-            identifier += '_lazy'
-            imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })})`)
-          } else {
-            imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
-          }
-
           const isClientOnly = component.mode === 'client'
           if (isClientOnly) {
             imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }]))
-            imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`)
             identifier += '_client'
           }
+
+          if (lazy) {
+            imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
+            identifier += '_lazy'
+            imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })}${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`)
+          } else {
+            imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
+
+            if (isClientOnly) {
+              imports.add(`const ${identifier}_wrapped = /*#__PURE__*/ createClientOnly(${identifier})`)
+              identifier += '_wrapped'
+            }
+          }
+
           return identifier
         }
         // no matched