createElement() has been called outside of render function. when handleSuccessMessage function used

[nishuonishuo]

[antfu]

Can you share a minimal reproduction? Thanks.

[nishuonishuo]

https://codesandbox.io/s/sleepy-lederberg-50px2?file=/src/main.js

you can visit it and click for bug

[Ttou]

1.2.1 has same problem, 1.1.5 is ok

[k644606347]

em...same problem, v1.2.4

[github-actions]

Stale issue message

[Hyphon]

v1.4.3 has same problem.

[MinatoHikari]

use setup: () => {} to avoid this warning.

[hisuwh]

Any updates on this?

[MinatoHikari]

Let's check about createElement.ts

export const createElement = function createElement(...args: any) {
  const instance = getCurrentInstance()?.proxy
  if (!instance) {
    __DEV__ &&
      warn('`createElement()` has been called outside of render function.')
    if (!fallbackCreateElement) {
      fallbackCreateElement = defineComponentInstance(
        getVueConstructor()
      ).$createElement
    }

    return fallbackCreateElement.apply(fallbackCreateElement, args)
  }

  return instance.$createElement.apply(instance, args)
} as CreateElement

const instance = getCurrentInstance()?.proxy
This is the cause of warning.

Remember that we can't get instance out of setup with getCurrentInstance.
It returns null when you call it in click event.

The solution is calling h in setup function
https://codesandbox.io/s/lingering-currying-l03w6f?file=/src/components/HelloWorld.vue

[antfu]

PR welcome to bypass the warning in this case.

[Dcx199302]

用于setup: () => {}避免此警告。

content: () => h('div', {}, [h('p', '使用函数返回正确执行')])
content: h('div', {}, [h('p', '直接调用报错上面提到的警告')]

[MinatoHikari]

用于setup: () => {}避免此警告。

content: () => h('div', {}, [h('p', '使用函数返回正确执行')]) content: h('div', {}, [h('p', '直接调用报错上面提到的警告')]

这个是错的，需要给h绑定vm

[Dcx199302]

用于setup: () => {}避免此警告。

content: () => h('div', {}, [h('p', '使用函数返回正确执行')]) content: h('div', {}, [h('p', '直接调用报错上面提到的警告')]

这个是错的，需要给h绑定vm

该如何去做呢，该段代码我并没有（也不需要）在template写任何html代码

[MinatoHikari]

用于setup: () => {}避免此警告。

content: () => h('div', {}, [h('p', '使用函数返回正确执行')]) content: h('div', {}, [h('p', '直接调用报错上面提到的警告')]

这个是错的，需要给h绑定vm

该如何去做呢，该段代码我并没有（也不需要）在template写任何html代码

const vm = getCurrentInstance()
const createElement = h.bind(vm)