Vue3中报createElement is not a function错误如何解决？

这个报错是Vue2到Vue3渲染函数API的破坏性变更导致的，核心差异有两点：

• Vue2中render函数的第一个入参是createElement（也就是生成VNode的h函数），但Vue3的render函数不再接收该参数，h函数需要手动从vue依赖包中导入
• Vue3中this.$slots下的插槽属性全部是函数形式，需要执行调用才能拿到对应的VNode数组，直接访问拿到的是函数本身，无法作为子节点传入

1. 首先从vue包中导入渲染需要的h函数：

import { h } from 'vue'

2. 修改v-style组件的注册逻辑，移除render函数的createElement形参，调整插槽的调用方式：

// app.js
app
  .component('err-text', ErrorText)
  .component('v-style', {
    render() {
      // 第三个参数传调用default插槽返回的VNode数组
      return h('style', {}, this.$slots.default())
    }
  })

修复完成后，原有模板中通过<v-style>包裹动态样式的写法不需要做任何修改，可以直接正常使用，和Vue2下的行为完全一致。

补充说明：如果是单文件组件场景，也可以直接封装SFC版本的v-style组件，逻辑更直观：

<!-- VStyle.vue -->
<template>
  <style>
    <slot />
  </style>
</template>

注意部分构建工具可能会对SFC中template内的style标签做静态提取，如果出现样式不生效的问题，优先使用上述render函数的写法。

内容的提问来源于stack exchange，提问作者Atlas-Pio