TypeError: parent is null in vite production mode

[kikyous]

Version

3.2.31

Reproduction link

github.com

Steps to reproduce

clone https://github.com/kikyous/vue-vite-bug-report

yarn install

yarn dev --mode production

open http://localhost:3000/

click input element, type anything.

What is expected?

no error

What is actually happening?

TypeError: parent is null
insert runtime-dom.esm-bundler.js:10
processCommentNode runtime-core.esm-bundler.js:4519
patch runtime-core.esm-bundler.js:4471
patchKeyedChildren runtime-core.esm-bundler.js:5403
patchChildren runtime-core.esm-bundler.js:5205
patchElement runtime-core.esm-bundler.js:4721
processElement runtime-core.esm-bundler.js:4569
patch runtime-core.esm-bundler.js:4486
patchKeyedChildren runtime-core.esm-bundler.js:5262
patchChildren runtime-core.esm-bundler.js:5205
patchElement runtime-core.esm-bundler.js:4721
processElement runtime-core.esm-bundler.js:4569
patch runtime-core.esm-bundler.js:4486
componentUpdateFn runtime-core.esm-bundler.js:5107
run reactivity.esm-bundler.js:167
callWithErrorHandling runtime-core.esm-bundler.js:155
flushJobs runtime-core.esm-bundler.js:394
promise callback*queueFlush runtime-core.esm-bundler.js:285
queueJob runtime-core.esm-bundler.js:279
effect runtime-core.esm-bundler.js:5139
triggerEffects reactivity.esm-bundler.js:359
triggerRefValue reactivity.esm-bundler.js:965
set value reactivity.esm-bundler.js:1001
set reactivity.esm-bundler.js:1016
0 App.vue:5
created runtime-dom.esm-bundler.js:1195
addEventListener runtime-dom.esm-bundler.js:316
created runtime-dom.esm-bundler.js:1185
callWithErrorHandling runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
invokeDirectiveHook runtime-core.esm-bundler.js:3744
mountElement runtime-core.esm-bundler.js:4597
processElement runtime-core.esm-bundler.js:4566
patch runtime-core.esm-bundler.js:4486
mountChildren runtime-core.esm-bundler.js:4685
mountElement runtime-core.esm-bundler.js:4594

---

<div class="border border-d8 w-full">
    <div class="p-5">
      <input
        v-model="name"
        type="text"
      >
      <div v-if="!name.length" class="text-sm text-red-400">
        error
      </div>
      <div v-if="showTable" class="">
        <ElTable :data="[]" style="width: 100%">
          <ElTableColumn width="100">
            <template #default="{row}">
              <span>{{ row.createdBy.name }}</span>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
    </div>
  </div>

when remove outer div

    <div class="p-5">
      <input
        v-model="name"
        type="text"
      >
      <div v-if="!name.length" class="text-sm text-red-400">
        error
      </div>
      <div v-if="showTable" class="">
        <ElTable :data="[]" style="width: 100%">
          <ElTableColumn width="100">
            <template #default="{row}">
              <span>{{ row.createdBy.name }}</span>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
    </div>

or change <span>{{ row.createdBy.name }}</span> to <span v-if="row.createdBy">{{ row.createdBy.name }}</span>

error is gone.

[posva]

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.

[kikyous]

Hi @posva ，my reproduction has only one .vue main file (App.vue), App-no-error-2.vue, App-no-error.vue is two file you can skip it (two way I found to prevent the error.)

And this error only occur in vite production mode.

I don't know how to be more minimal, any help ?

[posva]

No external libs: https://github.com/kikyous/vue-vite-bug-report/blob/main/package.json#L11

[kikyous]

I can reproduce this error with element-plus ElTable component only, because this error only occur in vite production mode and the error disappear when I remove the outer div (<div class="p-5">)，so I think this is a vue 3 bug mostly.

[kikyous]

Hi @posva , element-plus team member @msidolphin provide a minimal reproduction (no external libs https://github.com/kikyous/vue-vite-bug-report)

[LinusBorg]

#5657