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.

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.

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 ?

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

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.

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

#5657