Vue SSR中render函数调用resolveComponent报错求助

问题现象 #

在Vue SSR应用的组件render函数中调用resolveComponent时，会触发如下警告：

[Vue warn]: resolveComponent can only be used in render() or setup()

同时resolveComponent仅返回传入的组件名称字符串；但在setup函数中调用该函数却能正常获取到全局组件。

实际场景中Main.vue无法知晓全局组件的具体信息，且目标平台不支持动态导入，该方案不可行。不确定是用法错误还是警告信息存在误导。

示例代码 #

entryServer.ts #

import { createSSRApp } from "vue";
import { renderToString } from 'vue/server-renderer'
import Example from '@/components/Example.vue'
import Main from '@/components/Main.vue'

const app = createSSRApp(Main)
app.component("Example", Example)

;(async function() {
  const appHtml = await renderToString(app)

  setResult(appHtml) // 平台特定方法
})()

Main.vue #

<script lang="ts">
import { defineComponent, resolveComponent, h } from "vue";
import type {VNode} from 'vue'

export default defineComponent({
  name: "Main",

  setup() {
    return {
      component: resolveComponent("Example")
    }
  },

  render(): VNode {
    console.log('setup', this.component)
    console.log('render', resolveComponent("Example"))

    return h(this.component)
  }
})
</script>

Example.vue #

<script lang="ts">
import {createTextVNode, defineComponent} from "vue"
import type {VNode} from "vue"

export default defineComponent({
  name: 'Example',

  render(): VNode {
    return createTextVNode("xxx")
  }
})
</script>

问题原因 #

在Vue的SSR渲染流程中，resolveComponent依赖当前组件的渲染上下文来查找全局注册的组件。当在render函数中直接调用时，SSR环境下的上下文绑定存在差异，导致无法正确获取到全局组件注册表，最终只能返回组件名称字符串，同时触发误导性的警告。

而setup函数在组件初始化阶段执行，此时组件的上下文已经正确绑定，能够正常访问全局组件注册表，因此resolveComponent可以正常工作。

解决方案 #

既然setup中调用resolveComponent是可行的，我们可以在setup中提前解析所需的全局组件，然后在render函数中直接使用解析后的组件对象，这也是你当前示例中已经在做的正确方式。

如果实际场景中需要动态解析多个组件，可以在setup中创建一个工具函数来统一处理组件解析：

<script lang="ts">
import { defineComponent, resolveComponent, h } from "vue";
import type {VNode, Component} from 'vue'

export default defineComponent({
  name: "Main",

  setup() {
    // 封装全局组件解析逻辑
    const resolveGlobalComponent = (name: string): Component | string => {
      const comp = resolveComponent(name)
      return comp || name
    }

    // 提前解析固定组件
    const exampleComp = resolveGlobalComponent("Example")

    return {
      exampleComp,
      resolveGlobalComponent
    }
  },

  render(): VNode {
    // 若需动态解析组件，可调用setup返回的工具函数
    // const dynamicComp = this.resolveGlobalComponent("DynamicComponent")
    return h(this.exampleComp)
  }
})
</script>

这种方式既避开了render函数中resolveComponent的问题，又能满足动态解析需求，且无需依赖动态导入。

内容的提问来源于stack exchange，提问作者JT2809