From 0f705f3d4a639a9d1bdcc80a13f86fb54808e0a3 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 29 Nov 2023 09:06:32 +1100
Subject: [PATCH] fix(nuxt): island components with number prefix (#24469)

---
 .../src/app/components/island-renderer.ts     |  2 +-
 packages/nuxt/src/components/module.ts        |  2 +-
 packages/nuxt/src/components/templates.ts     | 20 ++++++++++++-------
 .../basic/components/1thing.island.vue        |  7 +++++++
 4 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 test/fixtures/basic/components/1thing.island.vue

diff --git a/packages/nuxt/src/app/components/island-renderer.ts b/packages/nuxt/src/app/components/island-renderer.ts
index d973946be1..8e77445742 100644
--- a/packages/nuxt/src/app/components/island-renderer.ts
+++ b/packages/nuxt/src/app/components/island-renderer.ts
@@ -4,7 +4,7 @@ import { createVNode, defineComponent, onErrorCaptured } from 'vue'
 import { createError } from '../composables/error'
 
 // @ts-expect-error virtual file
-import * as islandComponents from '#build/components.islands.mjs'
+import { islandComponents } from '#build/components.islands.mjs'
 
 export default defineComponent({
   props: {
diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
index c2809a798f..617ee28ac9 100644
--- a/packages/nuxt/src/components/module.ts
+++ b/packages/nuxt/src/components/module.ts
@@ -124,7 +124,7 @@ export default defineNuxtModule<ComponentsOptions>({
     if (nuxt.options.experimental.componentIslands) {
       addTemplate({ ...componentsIslandsTemplate, filename: 'components.islands.mjs' })
     } else {
-      addTemplate({ filename: 'components.islands.mjs', getContents: () => 'export default {}' })
+      addTemplate({ filename: 'components.islands.mjs', getContents: () => 'export const islandComponents = {}' })
     }
 
     const unpluginServer = createTransformPlugin(nuxt, getComponents, 'server')
diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts
index d0e250c5a7..826c84dada 100644
--- a/packages/nuxt/src/components/templates.ts
+++ b/packages/nuxt/src/components/templates.ts
@@ -86,13 +86,19 @@ export const componentsIslandsTemplate: NuxtTemplate<ComponentsTemplateContext>
       // .server components without a corresponding .client component will need to be rendered as an island
       (component.mode === 'server' && !components.some(c => c.pascalName === component.pascalName && c.mode === 'client'))
     )
-    return ['import { defineAsyncComponent } from \'vue\'', ...islands.map(
-      (c) => {
-        const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
-        const comment = createImportMagicComments(c)
-        return `export const ${c.pascalName} = defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`
-      }
-    )].join('\n')
+
+    return [
+      'import { defineAsyncComponent } from \'vue\'',
+      'export const islandComponents = {',
+      islands.map(
+        (c) => {
+          const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
+          const comment = createImportMagicComments(c)
+          return `  "${c.pascalName}": defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`
+        }
+      ).join(',\n'),
+      '}'
+    ].join('\n')
   }
 }
 
diff --git a/test/fixtures/basic/components/1thing.island.vue b/test/fixtures/basic/components/1thing.island.vue
new file mode 100644
index 0000000000..fdcf405cef
--- /dev/null
+++ b/test/fixtures/basic/components/1thing.island.vue
@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+
+<template>
+  <div>
+    Meant to detect syntax error when `components.islands.mjs` is created
+  </div>
+</template>