[Bug Report] [Component] [table] TypeError: parent is null in vite production mode

[kikyous]

Bug Type: Component

Environment

• Vue Version: 3.2.31
• Element Plus Version: 2.1.7
• Browser / OS: UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:98.0) Gecko/20100101 Firefox/98.0
• Build Tool: Vite

Reproduction

Related Component

• el-table

Reproduction Link

Github Repo

Steps to reproduce

yarn install

yarn dev --mode production

open http://localhost:3000/

click input element, type anything.

What is Expected?

no error in console

What is actually happening?

error

Additional comments

这个问题我在这里也提过，vuejs/core#5650

删除App.vue里的外层div(<div class="p-5">)就没有报错了

[msidolphin]

我试了将row.createdBy.name改为row.createdBy?.name是可以正常更新的，还未找到相关原因🤔，生产环境下<div class="p-5"> vnode的el属性更新时会变为null

[kikyous]

这个问题太奇怪了，不知道是vue, vite,还是element的问题

[msidolphin]

我这里有个最小复现demo，重点可能要放在showTable设置为true之后发生了什么变化

App.vue

<template>
  <div class="border border-d8 w-full">
    <div class="p-5">
      <input v-model="toggle" type="checkbox" />
      <div v-if="!toggle">error</div>
      <m-table v-if="showTable">
        <template #default="{ row }">{{ test(row) }}</template>
      </m-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import MTable from './table.ts'

const showTable = ref(false)

const toggle = ref(false)

onMounted(() => {
  setTimeout(() => {
    showTable.value = true
  }, 500)
})

const test = (row: any) => {
  return row.createdBy.name
}
</script>

table.ts

import { defineComponent, h } from 'vue'
export default defineComponent({
  render() {
    try {
      this.$slots.default?.({
        row: {},
        column: {},
        $index: -1,
      })
      return h('div', 222)
    } catch {
      return h('div', 111)
    }
  },
})

[kikyous]

我把这个最小化代码提到 vuejs/core issue 里让他们看看

[kikyous]

vuejs/core#5650 (comment)