fix(ssr): local content components on Cloudflare Workers (#3704)

onmax · web-flow · commit 7cff2b9f3ec6 · 2026-02-17T17:08:47.000+01:00
diff --git a/package.json b/package.json
@@ -75,8 +75,7 @@
     "hookable": "^5.5.3",
     "isomorphic-git": "^1.36.1",
     "jiti": "^2.6.1",
-    "json-schema-to-typescript-lite": "^15.0.0",
-    "knitwork": "^1.3.0",
+    "json-schema-to-typescript": "^15.0.4",
     "mdast-util-to-hast": "^13.2.1",
     "mdast-util-to-string": "^4.0.0",
     "micromark": "^4.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/runtime/components/ContentRenderer.vue b/src/runtime/components/ContentRenderer.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { kebabCase, pascalCase } from 'scule'
 import { resolveComponent, toRaw, defineAsyncComponent, computed } from 'vue'
-import type { AsyncComponentLoader } from 'vue'
 import type { MDCComment, MDCElement, MDCRoot, MDCText } from '@nuxtjs/mdc'
 import htmlTags from '@nuxtjs/mdc/runtime/parser/utils/html-tags-list'
 import MDCRenderer from '@nuxtjs/mdc/runtime/components/MDCRenderer.vue'
 import { toHast } from 'minimark/hast'
-import { globalComponents, localComponents } from '#content/components'
+import { globalComponents, localComponents, localComponentLoaders } from '#content/components'
 import { useRuntimeConfig } from '#imports'
 
 interface Renderable {
@@ -123,14 +122,8 @@ function resolveVueComponent(component: string | Renderable) {
       _component = resolveComponent(component, false)
     }
     else if (localComponents.includes(pascalCase(component))) {
-      const loader: AsyncComponentLoader = () => {
-        return import('#content/components')
-          .then((m) => {
-            const comp = m[pascalCase(component) as keyof typeof m] as unknown as () => unknown
-            return comp ? comp() : undefined
-          })
-      }
-      _component = defineAsyncComponent(loader)
+      const loader = localComponentLoaders[pascalCase(component) as keyof typeof localComponentLoaders]
+      _component = loader ? defineAsyncComponent(loader) : undefined
     }
     if (typeof _component === 'string') {
       return _component
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -18,6 +18,7 @@ declare module '#content/manifest' {
 declare module '#content/components' {
   export const globalComponents: string[]
   export const localComponents: string[]
+  export const localComponentLoaders: Record<string, import('vue').AsyncComponentLoader>
 }
 
 declare module '#content/dump' {
diff --git a/src/utils/templates.ts b/src/utils/templates.ts
@@ -1,9 +1,8 @@
 import { gzip } from 'node:zlib'
 import type { NuxtTemplate } from '@nuxt/schema'
 import { isAbsolute, join, relative } from 'pathe'
-import { genDynamicImport } from 'knitwork'
-import { compile as jsonSchemaToTypescript } from 'json-schema-to-typescript-lite'
-import type { JSONSchema } from 'json-schema-to-typescript-lite'
+import { compile as jsonSchemaToTypescript } from 'json-schema-to-typescript'
+import type { JSONSchema } from 'json-schema-to-typescript'
 import { pascalCase } from 'scule'
 import type { Schema } from 'untyped'
 import type { CollectionInfo, ResolvedCollection } from '../types/collection'
@@ -137,21 +136,32 @@ export const componentsManifestTemplate = (manifest: Manifest) => {
           return nuxt.options.dev || options.manifest.components.includes(c.pascalName) || c.global
         })
         .reduce((map, c) => {
-          map[c.pascalName] = map[c.pascalName] || [
-            c.pascalName,
-            `${genDynamicImport(isAbsolute(c.filePath)
-              ? './' + relative(join(nuxt.options.buildDir, 'content'), c.filePath).replace(/\b\.(?!vue)\w+$/g, '')
-              : c.filePath.replace(/\b\.(?!vue)\w+$/g, ''), { wrapper: false, singleQuotes: true })}`,
-            c.global,
-          ]
+          const importPath = isAbsolute(c.filePath)
+            ? './' + relative(join(nuxt.options.buildDir, 'content'), c.filePath).replace(/\b\.(?!vue)\w+$/g, '')
+            : c.filePath.replace(/\b\.(?!vue)\w+$/g, '')
+          map[c.pascalName] = map[c.pascalName] || [c.pascalName, importPath, c.global, c.export || 'default']
           return map
         }, {} as Record<string, unknown[]>)
 
       const componentsList = Object.values(componentsMap)
       const globalComponents = componentsList.filter(c => c[2]).map(c => c[0])
       const localComponents = componentsList.filter(c => !c[2])
       return [
-        ...localComponents.map(([pascalName, type]) => `export const ${pascalName} = () => ${type}`),
+        'const pickExport = (mod, exportName, componentName, path) => {',
+        '  const resolved = exportName === \'default\' ? mod?.default : mod?.[exportName]',
+        '  if (!resolved) {',
+        '    throw new Error(`[nuxt-content] Missing export "${exportName}" for component "${componentName}" in "${path}".`)',
+        '  }',
+        '  return resolved',
+        '}',
+        'export const localComponentLoaders = {',
+        ...localComponents.map(([pascalName, path, , exp]) => {
+          const pathLiteral = JSON.stringify(path)
+          const exportLiteral = JSON.stringify(exp)
+          const nameLiteral = JSON.stringify(pascalName)
+          return `  ${pascalName}: () => import(${pathLiteral}).then(m => pickExport(m, ${exportLiteral}, ${nameLiteral}, ${pathLiteral})),`
+        }),
+        '}',
         `export const globalComponents: string[] = ${JSON.stringify(globalComponents)}`,
         `export const localComponents: string[] = ${JSON.stringify(localComponents.map(c => c[0]))}`,
       ].join('\n')

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ declare module '#content/manifest' {`
`18`	`18`	`declare module '#content/components' {`
`19`	`19`	`export const globalComponents: string[]`
`20`	`20`	`export const localComponents: string[]`
	`21`	`+ export const localComponentLoaders: Record<string, import('vue').AsyncComponentLoader>`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`declare module '#content/dump' {`