前端页面在运行过程中出现ElementPlusError错误,报[ElOnlyChild] no valid child node found错误消息

本文记录一个前端页面开发出现的问题,涉及的前端框架版本为,
- "vue": "^3.2.22"
- "element-plus": "^2.0.4"

1. 问题

近期在使用vue 3 + element plus进行前端页面开发,在前端页面运行过程浏览器后台中出现如下错误消息,

error.ts:12 ElementPlusError: [ElOnlyChild] no valid child node found
    at debugWarn (error.ts:12:18)
    at Proxy.<anonymous> (only-child.ts:35:9)
    at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5098:34)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at updateComponent (runtime-core.esm-bundler.js:4968:26)
    at processComponent (runtime-core.esm-bundler.js:4901:13)
    at patch (runtime-core.esm-bundler.js:4489:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5107:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)

出现这个错误消息概率比较高,但不是每次都必现。页面上各个组件按钮都运行正常,出现这个问题感觉有些纳闷,上面的错误消息也没有直接给出哪里不对,一时不知道问题在哪里。

2. 定位

从错误消息[ElOnlyChild] no valid child node found来看,报的是子组件无效,估计是什么组件使用的不当,没有映射到相应的模型数据,是不是哪里变量命名有拼写错误,使用Ctrl+F检查了一番代码,没有发现任何变量拼写错误。

为了发现问题,开始对页面组件进行二分法排查,把页面组件逐一过滤,定位问题出现在如下一个气泡确认框组件上,

<el-popconfirm title="确定要删除吗?" @confirm="deleteConfig(row)">
   <template #reference>
       <el-button type="text" v-if="row.version != 'new'">删除</el-button>
   </template>
</el-popconfirm>

这个组件没有什么特别,之前已经在很多地方用的很好,唯一不同的是添加了v-if控制,稍微判断了一下,应该就是这个v-if导致。

若把上面的el-button去掉,则直接可以复现这个问题,

<el-popconfirm title="确定要删除吗?" @confirm="deleteConfig(row)">
   <template #reference>
   </template>
</el-popconfirm>

气泡确认框组件的用途,主要是在点击某个元素弹出一个简单的气泡确认框,其需要绑定在一个子组件上,若子组件为空,则会报出如下的错误信息,

[ElOnlyChild] no valid child node found...

在了解到如上的问题后,将v-if移到el-popconfirm组件,正确的书写方法为,

<el-popconfirm title="确定要删除吗?" v-if="row.version != 'new'" @confirm="deleteConfig(row)">
   <template #reference>
       <el-button type="text">删除</el-button>
   </template>
</el-popconfirm>

至此问题解决。