fix(nuxt): island components with number prefix

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: {
@@ -14,7 +14,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const component = islandComponents[props.context.name] as ReturnType<typeof defineAsyncComponent>
+    const component = (islandComponents as ([string, ReturnType<typeof defineAsyncComponent>])[]).find(([c]) => c === props.context.name)
 
     if (!component) {
       throw createError({
@@ -27,6 +27,6 @@ export default defineComponent({
       console.log(e)
     })
 
-    return () => createVNode(component || 'span', { ...props.context.props, 'nuxt-ssr-component-uid': '' })
+    return () => createVNode(component[1] || 'span', { ...props.context.props, 'nuxt-ssr-component-uid': '' })
   }
 })

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')

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')
   }
 }
 

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>